JavaScript を使用してアクティブ ナビゲーション クラスを Web サイトのメニューに動的に追加するにはどうすればよいですか?

動的アクティブ ナビゲーション クラスをメニューに追加する

Web ページをナビゲートするとき、現在のページに対応するアクティブなメニュー項目を強調表示するのが一般的です。 。これにより、サイト階層内の現在の場所に視覚的な手がかりが提供されるため、ユーザー エクスペリエンスが向上します。

この機能を実装するには、JavaScript を利用して現在の URL を識別し、適切なメニュー項目に「アクティブ」クラスを追加します。 .

JavaScript を使用してアクティブ ナビゲーション クラスを追加する方法

jQuery を使用したソリューションを調べてみましょう強力なライブラリ:

$(function () {
    var current = location.pathname;
    $('#nav li a').each(function () {
        var $this = $(this);
        if ($this.attr('href').indexOf(current) !== -1) {
            $this.addClass('active');
        }
    });
});

説明:

• ドキュメントの準備ができると、スクリプトが初期化されます。
• location.pathname プロパティ現在のページのパスを取得します。
• 各メニュー項目のアンカー タグを反復処理します。 ($('#nav li a')).
• アンカー タグごとに、indexOf() 関数を使用して、その href 属性に現在のパスが含まれているかどうかを確認します。
• 一致すると、対応するアンカー タグに「アクティブ」クラスが割り当てられます。

重要注:

メニューに同じページを指す複数のリンクが含まれている場合、この方法ではアクティブな項目を正確に判断できない可能性があります。このようなシナリオでは、これらのケースを処理するために追加のロジックが必要になる場合があります。

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