Jquery，一键切换两个元素，一个元素应该出现，另一个应该隐藏答案

【问题标题】：Jquery, Toggle two elements with one click, one element should appear and the other should be hiddenJquery，一键切换两个元素，一个元素应该出现，另一个应该隐藏
【发布时间】：2016-05-18 19:09:09
【问题描述】：

我有两个 div 和一个按钮。我希望一个 div 在单击时可见，它的显示属性为 none，而另一个 div 被隐藏。

这应该切换。在下一次单击时。第二个元素应该可见，第一个元素应该隐藏。

我不了解 Jquery。

我如何做到这一点？？

我一直在尝试这个......

<script>
      $(document).ready(function(){
          $("#filter").click(function(){
             $("#sidebar").toggle(function(){
                 $("#sidebar").hide();
                 $(".right-box").show();
             }, function(){
                 $("#sidebar").show();
                 $(".right-box").hide();
             });
         });
     });
</script>

它不能正常工作。 div一闪一闪的出现和消失

【问题讨论】：

分享你的 html 并通过 jquery api 看看你是怎么做到的
以learn.jquery.com开头

标签： jquery html css

【解决方案1】：

希望这对你有帮助。

HTML：

 <div id='content'>Hello World</div>  
 <input type='button' id='hideshow' value='hide/show'>

jQuery :

jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {        
     jQuery('#content').toggle('show');
});
 });

Demo

【讨论】：

不工作的人。试过了。我有一个按钮和两个不同的 div。我想切换这些div。单击按钮时，一个 div 必须出现（默认显示无属性），另一个可见 div 应该隐藏。

【解决方案2】：

你想多了。

    $(document).ready(function(){
        $(".show").click(function(){
           $(".shown").fadeToggle('slow');
           $(".hidden").fadeToggle('slow');
    });
    });

看到这个小提琴：http://jsfiddle.net/yomisimie/noc0fqz1/

【讨论】：

【解决方案3】：

 <!DOCTYPE html>
  <html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script>
      $(document).ready(function(){
        $("#hide").click(function(){
          $("#a").show();
          $("#b").hide();
        });
         });
      $(document).ready(function(){
        $("#show").click(function(){
        $("#b").show();
        $("#a").hide();
        });
      });

    </script>
    </head>
    <body>

  <div id="a">If you click div 1 , it will show</div>
   <div id="b">If you click div 2, it will show </div>
    <button id="hide">div 1</button>
     <button id="show">div 2</button>

   </body>
    </html>

希望这能满足您的需要。

【讨论】：