带有计数元素的 jQuery 切换菜单。答案

【问题标题】：jQuery toggle menu with counting elements.带有计数元素的 jQuery 切换菜单。
【发布时间】：2013-11-01 05:14:55
【问题描述】：

我有一个接近此的 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/链接。

【问题讨论】：

标签： jquery menu toggle

【解决方案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();

【讨论】：