CSS と JavaScript を使用して現在のページのリンクを別のスタイルにするにはどうすればよいですか?

現在のページのリンクを CSS で強調表示する

質問:

スタイルを変更するにはどうすればよいですか?現在のページ上のリンクを他のリンクと区別するにはどうすればよいですか?具体的には、テキストと背景の色を交換したいと考えています。

CSS 解決策:

li a {
  color: #A60500;
}

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

例:

<ul>

JavaScript解決策:

アクティブなスタイルを自動的に適用するには、jQuery の .each 関数を使用できます:

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

考慮事項:

<ul>

より正確にリンクを選択するには、「nav」のようなクラス属性の使用を検討してください。 [href]".

URL にクエリ パラメータが含まれている場合は、次の方法でクエリ パラメータを削除することを検討してください。

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

このアプローチにより、各ページを手動で変更する必要がなくなり、ページ全体で一貫したスタイルが確保されます。異なるページ URL。

以上がCSS と JavaScript を使用して現在のページのリンクを別のスタイルにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。