Jquery单击div打开另一个div，同时关闭其他div

有人能帮我修改下面的代码吗。我希望当用户单击boom1时，它将显示booming1，并将隐藏booming2，反之亦然，请帮助

<div id="boom1" >click me</div>
<div id="boom2" >click me</div>
<div id="booming1" style="display:none;">show on click boom1</div>
<div id="booming2" style="display:none;">show on click boom2</div>


   $("#boom1").click(function () {
      $(".booming1").show(1000);

    });
        $("#boom2").click(function () {
      $(".booming2").show(1000);

    });

点击我
点击我
单击“显示”按钮1
单击“显示”按钮2
$（“#boom1”）。单击（函数（）{
美元（“.booming1”）.show（1000）；
});
$（“#boom2”）。单击（函数（）{
美元（“.booming2”）.show（1000）；
});

对dom进行一些更改后，我们向目标元素标题添加一个类

boom

，并添加一个

数据目标

，其中包含要显示的元素的选择器。此外，我们还向目标元素添加了一个类

，以便能够识别它们

我们向

boom

元素添加一个单击处理程序，在该处理程序中，我们使用数据目标获取

boom

的目标，并隐藏

boom

类型的所有目标元素

<div class="boom" data-target="#booming1" >click me</div>
<div class="boom" data-target="#booming2" >click me</div>
<div id="booming1" class="booming" style="display:none;">show on click boom1</div>
<div id="booming2" class="booming" style="display:none;">show on click boom2</div>

---

演示：

对dom进行了一些更改，我们向目标元素标题添加了一个类

boom

，并添加了一个

数据目标

，其中包含要显示的元素的选择器。此外，我们还向目标元素添加了一个类

，以便能够识别它们

我们向

boom

元素添加一个单击处理程序，在该处理程序中，我们使用数据目标获取

boom

的目标，并隐藏

boom

类型的所有目标元素

<div class="boom" data-target="#booming1" >click me</div>
<div class="boom" data-target="#booming2" >click me</div>
<div id="booming1" class="booming" style="display:none;">show on click boom1</div>
<div id="booming2" class="booming" style="display:none;">show on click boom2</div>

---

演示：

有几种不同的方法可以做到这一点，但这里有一种不需要您做太多更改的方法

(function() {
  var $booming1,
    $booming2;

  $(function() {
    $booming1 = $("#booming1");
    $booming2 = $("#booming2");

    $("#boom1").click(function() {
      $booming1.show(1000);
      $booming2.hide()
    });
    $("#boom2").click(function() {
      $booming2.show(1000);
      $booming1.hide();
    });
  })
}(jQuery))

---

有两种不同的方法可以做到这一点，但这里有一种方法不需要你做太多改变

(function() {
  var $booming1,
    $booming2;

  $(function() {
    $booming1 = $("#booming1");
    $booming2 = $("#booming2");

    $("#boom1").click(function() {
      $booming1.show(1000);
      $booming2.hide()
    });
    $("#boom2").click(function() {
      $booming2.show(1000);
      $booming1.hide();
    });
  })
}(jQuery))

---

完成此类任务的一种简单方法是在要隐藏或显示的div上切换一个类

你会这样做的

$('#boom1').click(function(){
  $('.active').removeClass('active').hide();         
  $('#booming1').show(1000).addClass('active');

});//end boom1 click

$('#boom2').click(function(){
  $('.active').removeClass('active').hide();  
  $('#booming2').addClass('active').show(1000);

});

---

下面是一个示例-

实现这类任务的简单方法是在要隐藏或显示的div上切换一个类

你会这样做的

$('#boom1').click(function(){
  $('.active').removeClass('active').hide();         
  $('#booming1').show(1000).addClass('active');

});//end boom1 click

$('#boom2').click(function(){
  $('.active').removeClass('active').hide();  
  $('#booming2').addClass('active').show(1000);

});

---

下面是一个例子-

给它们所有相同的类，并以这种方式操作它们。并将booming1和booming2放在click me div中，以便于操作

例如：

HTML:

---

JSFiddle:

给它们提供相同的类，并以这种方式操作它们。并将booming1和booming2放在click me div中，以便于操作

例如：

HTML:

---

JSFiddle:

谢谢你的这篇文章，请你补充解释，这样我才能更好地理解它。同样适用于有同样问题的其他人。谢谢，我真的很感激。这依赖于HTML5

data-

属性才能工作。坦率地说，我不会为了这么简单的事情走那条路。谢谢你的这篇文章，请你加上解释，让我能更好地理解。同样适用于有同样问题的其他人。谢谢，我真的很感激。这依赖于HTML5

data-

属性才能工作。坦率地说，我不会为了这么简单的事情走那条路。谢谢，我正在努力寻找最普通或最标准的方法。所以我可能会在它的基础上发展。谢谢你，我正在努力找到最普通或最标准的方法。所以我可以在此基础上再接再厉。至少允许我在这里表达自己。---非常重复：或者举个例子。@ArnauOrriols谢谢，但这篇文章的重点是为自己找到一个好的实践或标准来遵循，而我还不擅长jQuery。如果我能给你一个建议，stackoverflow不是学习的地方。你可以从我之前给出的w3schools链接开始，它以一种非常干净和有组织的方式涵盖了基础知识。我猜你很着急；相信我，阅读文档/教程似乎花费了太多的时间，但最终它为你节省了很多时间盲目地搜索/询问/等待。至少让我在这里表达自己。---非常重复：或者举个例子。@ArnauOrriols谢谢，但这篇文章的重点是为自己找到一个好的实践或标准来遵循，而我还不擅长jQuery。如果我能给你一个建议，stackoverflow不是学习的地方。你可以从我之前给出的w3schools链接开始，它以一种非常干净和有组织的方式涵盖了基础知识。我猜你很着急；相信我，阅读文档/教程似乎花费了太多的时间，但最终它为你节省了很多时间盲目地搜索/询问/等待。