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

Posted 2023-03-05

【中文标题】使用切换或显示/隐藏切换 Div 内容

【英文标题】：Toggle Div Content with toggle or show/hide

【发布时间】：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 很简单

.noDisplaydisplay:none;

.yesDisplaydisplay:block;

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

【问题讨论】：

您可能需要重新考虑您的类命名和用法。看起来它可能会导致一些与否定的混淆。 parhaps .hidden display:none; 并使用 jquery 切换该类

@UrbanBjörkman 好点！虽然显示隐藏示例似乎在下面运行良好...不确定如何执行切换方法

【参考方案1】：

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

CSS

.noDisplaydisplay:none;
.yesDisplaydisplay: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/