Question

我在一个班级里有很多带有ids的div。我怎么展示一个并隐藏其余的？这里是我的HTML与3个这样的div

<div class="build">
   <div id="slide1">
      <!--slide1 elements -->
   </div>
   <div id="slide2">
      <!--slide2 elements-->
   </div>
   <div id="slide3">
      <!--slide2 elements-->
   </div>
</div>

这是我用JS试过的：

if (exp_id == "a_exp1") {
    new_exp_id = exp_id;

    $("#right").html("<div><img id='myimage1' onclick='changeimage1()' src='images/build_i.png'/>")
}

function changeimage1() {
    for (var n = 1; n <= 3; n++) {
        if (new_exp_id == "a_exp" + n) {


            $('.build').hide();
            $('.build').find('#slide' + n).show();
        }
    }
}

所以，如果它是a_exp1，它应该对应于slide1，如果它是a_exp2，它应该对应于slide2，依此类推。

我需要显示一个div并隐藏其余部分。我该怎么做呢？我在HTML的开头隐藏了整个班级。

Answer 1

$('.build').children('div').click(function()
{
    $(this).show().siblings().hide();
});

Answer 2

提供所有div的同一个班级让我们说'.chat'，然后隐藏所有的div与'。chat'并显示你想要显示的那个

<div id="slide1" class="chat">
<div id="slide2" class="chat">
<div id="slide3" class="chat">

现在，如果您想要显示ID为slide3的div，您可以执行此类操作

$('.chat').hide();
 $('#slide3').show();

如果您使用任何点击事件来显示和隐藏内容，则使用实时点击而不是单击

$('#somebutton').live("click",function(){
     $('.chat').hide();
 $('#slide3').show();
});

Answer 3

我会用一个“隐藏所有，显示一个”的方法接近它，这个方法可以让你不关心之前显示的那个，只是你想要展示的那个：

function showSlide(currentSlide) {
    $(".build").children().hide(); 
    $("#slide" + currentSlide).show();
}

然后你就可以showSlide(1)而且你很高兴。

Answer 4

$(document).ready (function () {
    $(".build div").click(function () {
       $(this).siblings().hide().end().show(); 
    });
});

使用JQuery隐藏和显示

4 个答案: