帶計數元素的jQuery切換菜單。

Question

我有一個HTML標記接近這個：

<ul class="menu"> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li><a href="#">Link 3</a></li> 
    <li><a href="#">Link 4</a></li> 
</ul> 

<!-- some other elements and containers here --> 

<div class="content">Content 1</div> 
<div class="content">Content 2</div> 
<div class="content">Content 3</div> 
<div class="content">Content 4</div> 

不幸的是，我不能改變的標記和我需要創建簡單的切換功能。什麼是創造一些作品一樣的最好的方式，如果用戶單擊「菜單」第一鏈接淡入（）首先在頁面上「內容」，

如果用戶單擊「菜單第二個鏈接「淡入（）第二個」 頁面

（...）

上。內容」？通常我會使用自定義數據屬性，但在這裏我想我需要以某種方式計算div和鏈接？我很喜歡這個爲未知數量的div /鏈接工作。

Answer 1

您可以使用index()和eq()與指數：

http://jsfiddle.net/Hq69e/

$('.menu a').click(function(e) { 
    e.preventDefault(); 

    var idx = $(this).parent().index();  
    $('.content').hide().eq(idx).show(); 
}); 

---

這裏有更好的一個小版本的衰落：

http://jsfiddle.net/Wr6Be/

$('.menu a').click(function(e) { 
    e.preventDefault(); 

    var idx = $(this).parent().index(); 

    $('.content:visible').fadeOut(function() { 
     $('.content').eq(idx).fadeIn(); 
    }) 

}); 

$('.content:first').show();