0

好吧,我正在努力做到这一点,所以当您单击一个 div 时,它会“关闭”其他两个 div 按钮,并使某些内容不可见

jQuery:

    var open1 = false;
    var open2 = false;
    var open3 = false;

    $(document).ready(function(){



$("#gun").on('click',
   function(){
        open2 = !open2;

        if(open2) {
          $("img.dataselectgun").fadeTo(0, 1.0);
          $("img.dataselectpop").fadeTo(0, 0.0);
          $("img.dataselectart").fadeTo(0, 0.0);
          $("#popactivated").attr("id","pop");
          $("#artactivated").attr("id","art");
          $(this).attr("id","gunactivated");
        }
        else {
            $("img.dataselectpop").fadeTo(0, 1);
            $("img.dataselectart").fadeTo(0, 1);
            $("#gunactivated").attr("id","gun");
        }

   }
);

$("#pop").on('click',
   function(){
        open1 = !open1;

        if(open1) {
          $("img.dataselectgun").fadeTo(0, 0.0);
          $("img.dataselectpop").fadeTo(0, 1.0);
          $("img.dataselectart").fadeTo(0, 0.0);
          $("#gunactivated").attr("id","gun");
          $("#artactivated").attr("id","art");
          $(this).attr("id","popactivated");

        }
        else {
            $("img.dataselectgun").fadeTo(0, 1);
            $("img.dataselectart").fadeTo(0, 1);
            $("#popactivated").attr("id","pop");
        }

   }
);

$("#art").on('click',
   function(){
        open3 = !open3;

        if(open3) {
          $("img.dataselectgun").fadeTo(0, 0.0);
          $("img.dataselectpop").fadeTo(0, 0.0);
          $("img.dataselectart").fadeTo(0, 1.0);
          $("#popactivated").attr("id","pop");
          $("#gunactivated").attr("id","gun");
          $(this).attr("id","artactivated");
        }
        else {
            $("img.dataselectgun").fadeTo(0, 1);
            $("img.dataselectpop").fadeTo(0, 1);
            $("#popactivated").attr("id","art");
        }

   }
);

    });

好吧哈哈这是很多jquery,所以这里是html:

    <div id="header">
    <div class="home" id="home" ><a href="index.html"><p><img class="rollover" src="images/home-crown.png" width="100px" /></p></a></div>
    <div class="topnav" id="gun"><p>GUN</p></div>
    <div class="topnav" id="pop"><p>POP</p></div>
    <div class="topnav" id="art"><p>ART</p></div>
</div>
    <div id="bodyparts">
    <div class="pillow" ></div>
    <div class="content" id="artbox"><p><img class="dataselectart" src="images/art9.png" width="300px" /></p></div>
    <div class="content" id="popbox"><p><img class="dataselectpop" src="images/pop9.png" width="300px" /></p></div>
    <div class="content" id="gunbox"><p><img class="dataselectgun" src="images/gun9.png" width="300px" /></p></div>
</div>

好吧,对大代码感到抱歉,但这是主要问题,每个单独的“按钮”都可以工作,但是当两个“按钮”被单击(或为真)时,它们会产生一些冲突;我尝试了切换,但收到了同样的问题,如果要通过切换来完成,那就太好了,但我是 jquery 的新手,不知道怎么做;任何帮助都会很棒

提前谢谢(我知道我的代码很乱;抱歉)

编辑:根据建议更改了一些内容;效果更好,但是有没有办法用 if/else 影响另一个 if/else(有效地用 jquery 改变 jquery?)

4

1 回答 1

1

如果您只想显示被点击的那个,那么您不必担心跟踪状态。这可以通过以下方式完成:

jsFiddle

$(document).ready(function () {
    $('.topnav').on('click', function () {

        // Get the <img> tag for the link that was clicked
        var myImg = $('.dataselect' + this.id);

        // Fade the <img> tag
        myImg.fadeTo(0, 1.0);

        // Get the other <img> tags, exclude myImg and fade them
        $('.content img').not(myImg).fadeTo(0, 0.0);

    });
});
于 2013-03-30T05:46:11.150 回答