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

我希望通过一个简单的jquery问题获得一些指导

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

我在这里创建了一个JSFIDLE

我的想法是，我可以切换一个名为

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>

演示在这里

使用

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();
});

但是，您可以使用类似..的函数<代码>切换（）滑动切换（）减少代码

使用

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();
});

但是，您可以使用类似..的函数<代码>切换（）滑动切换（）减少代码

更新了您的小提琴：

更新您的小提琴：

u可以在没有css的情况下完成这项工作，我的意思是使用jquery
$（“.yesDisplay”）.hide（）；
$（“.noDisplay”）.hide（）；
$（“#opt1”）。单击（函数（）{
$（“.yesDisplay”）.show（）；
$（“.noDisplay”）.hide（）；
});
$（“#opt2”）。单击（函数（）{
$（“节点显示”）.show（）；
$（“.yesDisplay”）.hide（）；
});
选择1
选择2
当我按下选项1和隐藏选项2内容时显示

当我按下选项2并隐藏选项1内容时显示

你可以在这里检查

你可以不用css，我的意思是使用jquery
$（“.yesDisplay”）.hide（）；
$（“.noDisplay”）.hide（）；
$（“#opt1”）。单击（函数（）{
$（“.yesDisplay”）.show（）；
$（“.noDisplay”）.hide（）；
});
$（“#opt2”）。单击（函数（）{
$（“节点显示”）.show（）；
$（“.yesDisplay”）.hide（）；
});
选择1
选择2
当我按下选项1和隐藏选项2内容时显示

当我按下选项2并隐藏选项1内容时显示

---

你可以在这里查看

你可能想重新考虑你的类命名和用法。看起来它可能会导致一些与否定的混淆。隐藏{display:none；}并使用jquery@UrbanBj奥克曼说得好！虽然下面的show-hide示例似乎很有效……但不确定如何使用切换方法，您可能需要重新考虑类的命名和用法。看起来它可能会导致一些与否定的混淆。隐藏{display:none；}并使用jquery@UrbanBj奥克曼说得好！虽然下面的show hide示例似乎工作得很好…但不确定如何执行切换methodtoggle可能会非常慢。请参见此处的测试：切换可能非常慢。请参见此处的测试：

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>