1

すべて同じリンクを持つ複数のナビゲーション セクション。アクティブなセクションは、アクティブなクラス ( .active) を介して最初のナビゲーションに表示されます。後続のナビゲーション セクションで同じリンクを強調したいと思います。

もともと、私は複製方法を使用しました（あなたの素晴らしい人々による信用、jQuery replaceWith() 各要素を最初の で）。それは完全に機能しましたが、他の機能と干渉しました（ページから元の要素を削除して置き換えるため）。

したがって、最初のセクションのアクティブなクラスをチェックし、後続のセクションで一致するリンクを見つけて、クラスを適用する別の巧妙な方法を見つける必要があります。

私はこのようなことを考えています...しかし、効率的で見苦しくないものです。以下の答えは機能します。

HTML:

<nav class="postNav">
    <ul>
        <li class="active"><a href="#pageHeader">link to header</a></li>
        <li><a href="#one">link to other posts</a></li>
        <li><a href="#two">link to other posts</a></li>
        <li><a href="#three">link to other posts</a></li>
        <li><a href="#four">link to other posts</a></li>
        <li><a href="#five">link to other posts</a></li>
    </ul>
</nav>

JavaScript:

var navs   = $('.postNav'),
    first  = navs.first(),
    active = first.find('.active a').attr('href'),
    anchrs = navs.not(first);

anchrs.find('li').removeClass('active');
anchrs.find('a[href=' + active + ']').parent().addClass('active');

アップデート

おそらく、インデックス内のどの子がアクティブであるかを確認することによってですか? 次に、アンカーでフィルタリングする必要はありません...

更新 + 最終回答

私のセレクターは、jfriendの答えのバージョンをキャッシュしました:

var nav   = $('.postNav'),
first = nav.filter(':eq(0)'),
notF  = nav.filter(':gt(0)'),
index = first.find('.active').index();

notF.each(function(){
    $(this).find('li').removeClass('active').eq(index).addClass('active');
});
4

2 に答える 2

1

liそのulとjQuery内のインデックス位置を使用してこのよう.index()に行うことができ、それ.eq()を簡単にします。

var index = $(".postNav .active").index();
$(".postNav ul").each(function() {
    $(this).children("li").removeClass("highlight").eq(index)
        .not(".active").addClass("highlight");
});

作業デモ： http： //jsfiddle.net/jfriend00/dWaCn/

これは次のように機能します。

  • アクティブな要素を検索し、その兄弟に関連するインデックスを取得します
  • すべてのpostNavulタグを検索します
  • それらのそれぞれですべてのliの子を見つけます
  • 以前の「ハイライト」クラスを削除します
  • 一致するインデックス兄弟を取得します
  • アクティブなものを削除して、変更しないようにします
  • ハイライトクラスを追加する
于 2012-09-11T04:59:10.257 に答える
0

各 li 要素にクラスを追加しない理由:

<nav class="postNav">
  <ul>
    <li class="header active"><a href="#pageHeader">link to header</a></li>
    <li class="one"><a href="#one">link to other posts</a></li>
    <li class="two"><a href="#two">link to other posts</a></li>
    <li class="three"><a href="#three">link to other posts</a></li>
    <li class="four"><a href="#four">link to other posts</a></li>
    <li class="five"><a href="#five">link to other posts</a></li>
  </ul>
</nav>

次に、JavaScript で:

$(function() {
    $('li').on('click', function() {
        $('.active').removeClass('active');
        $('.'+$(this).attr('class')).addClass('active');
    });
});

このjsFiddleは要件を満たしているようです。$(this).attr('class'); に依存する問題を引き起こす可能性のある複数のクラスがそれらの li 要素 ('active' 以外) に割り当てられているかどうかが懸念されます。

于 2012-09-11T04:25:38.857 に答える