0

我希望通过一个简单的 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/

4

3 回答 3

3

使用hide() show()jquery函数..click()点击时触发事件......我尽可能简单，这样你就会很容易理解

CSS

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

查询

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

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

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

在这里摆弄

于 2013-02-01T08:44:21.393 回答
1

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

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

$('#opt2').click(function(){
    $('.yesDisplay').hide();
    $('.noDisplay').show();
});
于 2013-02-01T08:46:28.883 回答
1 
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/

于 2013-02-01T08:50:49.383 回答