jQueryを使用して現在のURLに基​​づいてアクティブなメニュー項目を設定する

この問題は、Webサイトを構築するときに何度も発生します。ナビゲーションメニューでアクティブなセクションを強調表示できるように、ユーザーの現在の場所を特定するにはどうすればよいですか。これは基本的なニーズですが、ソリューションは新しいビルドごとに再発明されているようです。

この問題を動的に解決する場合、サーバー側とクライアント側の2つの主要なルートがあります。サーバー側でこれを解決すると、要求されているページをより適切に処理できるので便利ですが、常に実用的であるとは限りません。少し計画を立てれば、JavaScript(およびオプションでjQuery)を使用してクライアント側でこれを解決するのは非常に簡単です。

ヘッダーに基本的なナビゲーションメニューがあり、現在のページの背景色を変更したいとします。

理想的には、[ツアー]をクリックして[ツアー]ページに移動したときに、メニューに現在地を反映させたいと考えています。

jQueryを使用してこれを行うには、各メニューリンクのhref属性を現在のブラウザのURLと比較し、一致するものを見つけようとします。一致するものが見つかった場合は、クラスをに追加して、その要素をアクティブに設定します。

  • 素子。

    この非常に基本的な例の最終結果は次のようになります

    このスクリプトは、ページが読み込まれるたびに実行され、各メニューリンクのhrefを現在のページのURLと比較します。ドメイン名の後に始まり、hrefに存在する文字数だけ前方に進みます(startsWith()関数と同様)。これにより、「Tour」のサブページで、Tourをアクティブセクションとしてフラグを立てることができます(例:/tour/section2.html)。一致するものが見つかると、親要素(この場合は

  • -「アクティブ」のクラスが追加されています。

    このソリューションは、jsFiddleで使用でき、以下にも埋め込まれています。自分のニーズに合わせて変更する必要がある主なものは、JavaScriptの9行目の「.nav」セレクターです。これを変更して、処理するナビゲーション要素を選択する必要があります。

    結果ウィンドウで実際にURLを変更できないため、jsFiddleの例は機能しませんが、コードをHTMLファイルに簡単にコピーしてテストできることに注意してください。