ホームページ >ウェブフロントエンド >CSSチュートリアル >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 サイトの他の関連記事を参照してください。