显示/隐藏相应div的Javascript旋转木马。jQuery函数，用于隐藏除所选内容之外的所有内容

我有一个带有图像缩略图的旋转木马。单击时，它们显示相应的div并隐藏所有其他div

当前的脚本工作正常，除了我现在有大约30个div和相应的缩略图，而不是3个，客户端可以通过WordPress添加更多。因此，我需要一种更简单的方法来说“隐藏除所选div之外的所有div”，而不使用实际的div编号

HTML:

---

您可以使用

.sibbins（）

：

---

我建议您为此使用div'carousel'的子对象（

锚定

）的click事件。单击后，首先隐藏“内容”中的所有元素（

div

）。然后使用“

this

”对象获取剪辑锚的索引。在此之后，使用该索引显示当前对应的div。在这里，您可以看到索引是连接两者的唯一东西。所以你必须在这两方面保持相同的顺序

HTML

<div class="carousel" >
<a id="lnk1" >image 1</a>
<a id="lnk2" >image 2</a>
<a id="lnk3" >image 3</a>
<a id="other1" >image 4</a>   
<a id="other2" >image 5</a>  
</div>
<div class="content">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="other_div1">div4</div>
<div id="other_div2">div5</div>
</div>

---

我尝试了这一点，但无论我点击哪个图像，它都能正常工作，只显示div1并隐藏所有其他图像。它不加载相同编号的div。我知道它很接近，但我不是jQuery专家。您能告诉我们您使用的是哪个库吗？jcarousel？

$(document).ready(function() {
    var h1 = $("#div1").height();
    var h2 = $("#div2").height();
    var h3 = $("#div3").height();
$("#div1,#div2,#div3").height(Math.max(h1, h2, h3));
$("#div2,#div3").hide();

$("#lnk1").live('click', function() {
    $("#div1").show();
    $("#div2,#div3").hide();
});

$("#lnk2").live('click', function() {
    $("#div2").show();
    $("#div1,#div3").hide();
});

$("#lnk3").live('click', function() {
    $("#div3").show();
    $("#div1,#div2").hide();
});

$('.carousel a').click(function() {
    $('.content div').eq($(this).index()).show().siblings().hide();
});

<div class="carousel" >
<a id="lnk1" >image 1</a>
<a id="lnk2" >image 2</a>
<a id="lnk3" >image 3</a>
<a id="other1" >image 4</a>   
<a id="other2" >image 5</a>  
</div>
<div class="content">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="other_div1">div4</div>
<div id="other_div2">div5</div>
</div>

$(".carousel > a").live('click', function() {
    $(".content > div").hide(); //hide all divs
    $(".content > div").eq($(this).index()).show();//display curresponding div of the clicked anchor
});