javascript - 显示带有导航中索引的编号的 div

Question

我有这样的设置:

Link          ------------------------------
Link          |                            |
Link          |                            |
Link          |            DIV             |
              |                            |
              |                            |
              ------------------------------

                 (3 more divs are hidden) 

链接的数量会有所不同，但每个链接也会有一个内容 div。

到目前为止，我已经使用了这段代码并且它有效:

$(".link").click(function () {  
var divname = this.name;
$("."+divname).fadeIn('slow').siblings().hide();

但这一次，由于内容是用户生成的，我无法控制给定的名称。

是否可以使用 jQuery 来计算链接数和框数(始终相等)，假设我单击第二个链接，将显示第二个 div。如果我点击第三个链接，第三个 div 将显示，依此类推。

这是 html:

<div id="links">
 <span>Link</span>
 <span>Link</span>
 <span>Link</span>
 <span>Link</span>
</div>

<div id="content">
 <div>DIV 1</div>
 <div>DIV 2</div>
 <div>DIV 3</div>
 <div>DIV 4</div>
</div>

这是我的尝试:

$(".div").not(":first").hide();

$(".link").click(function () {  

    var number = $("#links").index(this);   

});

还没有太多。但是我现在如何告诉内容，它应该显示带有刚刚在链接中单击的索引号的 div？

Answer 1

我会尝试这样的事情:

$(".div").not(":first").hide();

$("#links span").click(function () {  
  $('#content div').eq($(this).index()).show().siblings().hide();
});