Question

有人会帮我修改下面的代码。我想当用户点击 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);

    });

Answer 1

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

我们在boom元素中添加了一个点击处理程序，在处理程序中我们使用data-target获取boom的目标并隐藏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();
});

演示：Fiddle

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

给他们所有相同的类并以这种方式操纵它们。并且在点击我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/

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

4 个答案: