CSS と jQuery を使用してナビゲーション メニューで現在のページのリンクを強調表示するにはどうすればよいですか?

CSS と jQuery を使用して現在のページのリンクの色を変更する方法

問題:

ナビゲーションで現在のページを強調表示するためにリンクのテキストと背景の色を変更するにはどうすればよいですかmenu?

CSS ソリューション:

基本的なスタイルの場合、CSS はリスト項目内のすべてのリンクをターゲットにするセレクターを提供します:

li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}

ただし、このアプローチでは現在のページのリンクは区別されません。

jQuery解決策:

現在のページ リンクを動的に強調表示するには、jQuery の .each 関数を使用できます。

$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});

このコードはすべてのリンクを反復処理し、リンクの href が現在のリンクと一致するかどうかを確認します。ページ URL を追加し、事前定義された URL に一致する「アクティブ」クラスを追加します。 style.

考慮事項:

• $("nav [href]") のような CSS セレクターを使用してリンクの選択を絞り込みます。
• URL パラメータを次のように削除して処理します。 this.href.split("?")[0].
• このアプローチにより、各ページでの手動変更を回避し、リンク スタイルの一貫性を維持できます。

以上がCSS と jQuery を使用してナビゲーション メニューで現在のページのリンクを強調表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。