JavaScript はどのようにして現在の URL に基づいてナビゲーション リンクに「アクティブ」クラスを追加できますか?

URL に基づいたアクティブ ナビゲーション クラスの追加: JavaScript を使用したガイド

複雑な Web サイトをナビゲートするには、ユーザーがメニュー内の現在のページを効率的に識別する必要があります構造。ユーザー エクスペリエンスを向上させるには、ページの読み込み時に現在のページに対応するナビゲーション アイテムにアクティブ クラスを追加することが重要です。

提供されている JavaScript コードは、ページの読み込みではなくユーザーのクリックに応答するため、残念ながらこの目標を達成できません。 。これに対処するには、現在のページ URL を検査し、アクティブなクラスを適切なメニュー項目に動的に追加する JavaScript を実行する必要があります。

このタスクを実行する改訂された 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');
        }
    })
})

このコードは jQuery を利用して各メニュー項目のリンクを反復処理し、その href 属性を現在のページのパス名と比較します。一致すると、アクティブ クラスが対応するリンクに追加されます。

適切な JavaScript の実行と論理比較を利用することで、アクティブ クラスを適切なナビゲーション項目にエレガントに追加でき、Web サイトのナビゲーションがわかりやすくなります。

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