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

Answer 2

jQuery循环包括一个计数器：

$("#links span").each(function(i) {    
  $(this).click(function(){$("#content div").eq(i).fadeIn("slow").siblings().hide();});
});

小提琴在这里：http://jsfiddle.net/Rmr8R/

使用导航中编入索引的编号显示div

2 个答案: