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 回答