は、私はこのようなセットアップを持っているナビゲーション

Question

にインデックスされた番号を持つdiv要素を表示します。

これまでのところ、私はこのコードを使用しているし、それが動作します：

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

しかし、コンテンツがユーザーに生成されるので、この時間は、私は与えられた名前を制御することはできません。

jQueryではリンク数とボックス数（常に等しくなります）を数え、2番目のdivが表示される2番目のリンクをクリックするとします。 3番目のリンクをクリックすると、3番目のdivが表示されます。

これはhtmlです：

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

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

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

}); 

ない、かなりまだ：

<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が表示されるはずです。

Answer 1

私はこのような何かを試してみた：

は

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

フィドルはここにある：

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

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

Answer 2

jQueryのループカウンタが含ま