現在の URL に基づいて「アクティブ」クラスをナビゲーション リンクに動的に追加する方法

現在の URL を反映するアクティブ ナビゲーション クラスを追加する

Web サイトをナビゲートするには、多くの場合、現在のページを視覚的に示す必要があります。これは、次の方法で実現できます。 「アクティブ」クラスを対応するメニュー項目に追加します。この記事では、JavaScript を使用してこの機能を実装する方法を説明します。

以下のナビゲーション メニューの例を考えてみましょう。ここでは、「manageIS.aspx」ページで「管理」リンクが「アクティブ」として表示されます。

<ul>

次の JavaScript スニペットは、目的の効果を実現します:

$(function(){
    var current = location.pathname;
    $('#nav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})

このコードは、現在のページのパス名を割り当てます。 「現在の」変数に。次に、すべてのメニュー リンクを反復処理し、その「href」属性が現在のパスと一致するかどうかを確認します。一致するものが見つかった場合、「アクティブ」クラスがそのリンクに追加されます。

質問で提供されている元の JavaScript とは異なり、このアプローチはクリック イベントに依存せず、ページの読み込み時に実行されます。したがって、「アクティブ」クラスはページの存続期間全体にわたって存続し、常に現在のページを明確に示します。

以上が現在の URL に基づいて「アクティブ」クラスをナビゲーション リンクに動的に追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。