0

これに近い 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>

残念ながら、マークアップを変更することはできず、単純なトグル機能を作成する必要があります。次のように機能するものを作成する最良の方法は何ですか:

ユーザーが「メニュー」から最初のリンクをクリックすると、ページの最初の「.content」で、fadeIn()、

ユーザーが「メニュー」から 2 番目のリンクをクリックした場合

(...)

? 通常はカスタムのデータ属性を使用しますが、ここでは div とリンクを何らかの方法でカウントする必要があると思いますか? これが不明な数のdiv /リンクで機能することを望みます。

4

1 に答える 1

1

そのインデックスでindex()andを使用できます。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();
于 2013-10-31T21:14:55.207 に答える