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

Answer 2

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

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

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

Answer 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/

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

3 个答案: