首页 文章

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

提问于
浏览 次
0

我希望得到一些简单的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/

javascript jquery toggle show-hide

3 回答

  • 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

    回复于
  • 3

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

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

$('#opt2').click(function(){
    $('.yesDisplay').hide();
    $('.noDisplay').show();
});
    回复于
  • 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/

    回复于

相关问题