URL に基づいてアクティブなメニュー項目を動的に強調表示するにはどうすればよいですか?

ページ URL に基づいてアクティブなメニュー項目を動的に強調表示する

Web サイトを開発するときの一般的なタスクの 1 つは、現在アクティブなメニュー項目を強調表示することです。表示されているページの URL に基づいて。これにより、ユーザーのナビゲーションが強化され、Web サイト階層内のユーザーの現在位置を示す視覚的な手がかりが提供されます。

ソリューションの実装

通常、この動作を動的に実装するには 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');
        }
    })
})

説明

このコードではスニペット:

• $(function(){...}) は、ページが完全に読み込まれた後にコードが実行されることを保証します。
• var current = location.pathname; は現在の URL を取得します。 path.
• $('#nav li a').each(function(){...}) は、#nav 要素内のすべてのメニュー項目 (アンカー タグ) を反復処理します。
• var $this = $(this); は、現在のメニュー項目を保存します。処理済み.
• if($this.attr('href').indexOf(current) !== -1){...} 現在の URL パスに href が含まれているかどうかを確認しますメニュー項目の属性。アクティブなページであることを示します。
• $this.addClass('active'); は、 「active」クラスを適切なメニュー項目に追加します。

このアプローチでは、ページの読み込み時にアクティブなメニュー項目が正確に強調表示され、一貫性のあるユーザーフレンドリーなナビゲーション エクスペリエンスが保証されます。

以上がURL に基づいてアクティブなメニュー項目を動的に強調表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。