jquery - 带有计数元素的 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>

不幸的是，我无法更改标记，我需要创建简单的切换功能。创建类似以下内容的最佳方法是什么：

如果用户从页面上的“菜单”fadeIn() 的第一个“.content”中单击第一个链接，

如果用户从页面上的“菜单”fadeIn() 第二个“.content”中单击第二个链接

(...)

? 通常我会使用自定义数据属性，但在这里我想我需要以某种方式计算 div 和链接？我希望这适用于未知数量的 div / 链接。

Answer 1

您可以使用index()andeq()与该索引：

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