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

jQuery切换菜单与计数元素。

1 个答案: