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

Question

有人会帮我修改下面的代码吗？我希望当用户单击繁荣 1时，它会显示繁荣 1并隐藏繁荣2，反之亦然，请帮助。

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

    });

Answer 1

对 dom 进行了一些更改，我们boom向目标元素标题添加了一个类，data-target其中包含要显示的元素的选择器。我们还向目标元素添加了一个类booming，以便可以识别它们。

boom我们向元素添加一个点击处理程序，在处理程序中我们boom使用 data-target 获取目标并隐藏所有类型的目标元素booming

<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>

和

$(".boom").click(function () {
    var $target = $($(this).data('target'));
    $(".booming").not($target).hide();
    $target.show();
});

演示：小提琴

Answer 2

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

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

Answer 3

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

你的JS会像这样..

$('#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);

});

这是一个例子 - http://jsfiddle.net/VgbvF/

Answer 4

给他们所有相同的课程并以这种方式操纵他们。并在 click me div 中放置 booming1 和 booming2 以便于操作。

例子：

HTML：

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

jQuery：

$(".boom").click(function(event) {
    $(".boom").children().hide();
    $(this).children().show();
});

JSFiddle：http: //jsfiddle.net/P5y2G/