javascript - 通过切换或显示/隐藏切换 Div 内容

Question

我希望获得一些有关简单 jquery 问题的指导。

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

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

我的想法是，我可以切换一个名为 noDisplay 的类，该类将在我不想显示的 div 上设置(从而隐藏它)，我不确定 jquery 是否可以执行此操作？

我也不确定使用 jquery show/hide 类来实现这一点是否更容易？

谢谢

我的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/

Answer 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