「アクティブな」クラスをナビゲーション メニューに追加して現在のページを強調表示するにはどうすればよいですか?

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

Web 開発では、現在アクティブなページを表すメニュー項目を強調表示するのが一般的です。これを実現するには、「アクティブ」クラスを対応するメニュー リスト項目に動的に追加します。 JavaScript を使用してこれを行う方法は次のとおりです:

JavaScriptコード:

<br>$(function(){<pre class="brush:php;toolbar:false">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');
    }
})

})

説明:

このコード スニペットは次のことを実現します。イベント ハンドラーをドキュメントの Ready イベント (ページが完全に読み込まれたときにトリガーされる) にバインドすることで、目的の結果を得ることができます。次に、メニュー内の各リンクを反復処理し、その href 属性が現在のページのパス名と一致するかどうかを確認します。一致するものが見つかった場合、「アクティブ」クラスが一致するリンクに追加され、ユーザーが対応するページにいることを視覚的に示します。

コードの適用:

この機能を Web サイトに実装するには、JavaScript コードをコピーしてページのヘッダーに貼り付けるだけです。コードが <script></script> 内にあることを確認してください。タグが必要であり、前提条件として jQuery ライブラリが含まれていることを確認してください。

以上が「アクティブな」クラスをナビゲーション メニューに追加して現在のページを強調表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。