使用切换或显示/隐藏切换 Div 内容答案

【问题标题】：Toggle Div Content with toggle or show/hide使用切换或显示/隐藏切换 Div 内容
【发布时间】：2013-01-16 12:51:49
【问题描述】：

我希望通过一个简单的 jquery 问题获得一些指导。

我试图在按下按钮时显示/隐藏内容。我有 2 个按钮。我希望一个按钮显示 1 个 div 的内容，我希望另一个按钮在按下时隐藏第一个 div 的内容并显示第二个 div 的内容。

我在这里创建了一个 JSFiddle http://jsfiddle.net/Yn3tt/1/

我的想法是我可以切换一个名为 noDisplay 的类，它会设置在我不想显示的 div 上（因此隐藏它）我不确定 jquery 是否可以这样做？

我也不确定这是否更容易使用 jquery 显示/隐藏类来实现这一点？

谢谢

我的HTML如下

<button id="opt1">Option 1</button>
<button id="opt2">Option 2</button>

<div class="yesDisplay">
<p>Show me when I press Option 1 and hide Option 2 content</p>
</div>

<div class="noDisplay">
<p>Show me when I press Option 2 and Hide Option 1 content</p>
</div>

我的 CSS 很简单

.noDisplay{display:none;}

.yesDisplay{display:block;}

演示在这里http://jsfiddle.net/Yn3tt/1/

【问题讨论】：

您可能需要重新考虑您的类命名和用法。看起来它可能会导致一些与否定的混淆。 parhaps .hidden {display:none;} 并使用 jquery 切换该类
@UrbanBjörkman 好点！虽然显示隐藏示例似乎在下面运行良好...不确定如何执行切换方法

标签： javascript jquery toggle show-hide

【解决方案1】：

使用hide()show() jquery 函数..click() 单击时触发事件...我尽可能简单，以便您理解

CSS

.noDisplay{display:none;}
.yesDisplay{display:none;}

JQUERY

 $('#opt1').click(function(){
     $('.yesDisplay').show(); //class selector for the div to show
     $('.noDisplay').hide();
 });

$('#opt2').click(function(){
     $('.noDisplay').show();
   $('.yesDisplay').hide();
});

但是你可以使用类似toggle()slideToggle()的函数来减少你的代码

fiddle here

【讨论】：

切换可能非常慢。在此处查看测试：http://jsperf.com/

【解决方案2】：

更新了你的小提琴： http://jsfiddle.net/Yn3tt/3/

$('#opt1').click(function(){
    $('.yesDisplay').show();
    $('.noDisplay').hide();
});

$('#opt2').click(function(){
    $('.yesDisplay').hide();
    $('.noDisplay').show();
});

【讨论】：

【解决方案3】：

u can do this without css ,i mean using jquery
<script>
      $(".yesDisplay").hide();
      $(".noDisplay").hide();
  $("#opt1").click(function(){
      $(".yesDisplay").show();
     $(".noDisplay").hide();
});


  $("#opt2").click(function(){
      $("noDisplay").show();
     $(".yesDisplay").hide();
});
</script>

<button id="opt1">Option 1</button>
<button id="opt2">Option 2</button>

<div class="yesDisplay">
<p>Show me when I press Option 1 and hide Option 2 content</p>
</div>

<div class="noDisplay">
<p>Show me when I press Option 2 and Hide Option 1 content</p>
</div>

你可以在这里查看http://jsfiddle.net/Yn3tt/7/

【讨论】：