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

CSS を使用した現在のページのリンク スタイルのカスタマイズ

多くの場合、Web 開発者は、現在のページ上のリンクの外観を他のページと区別したいと考えます。 。一般的なアプローチの 1 つは、テキストと背景の色を交換することです。

CSS でこの効果を実現するには、次のアプローチを検討してください。

li a {
  color: #A60500;
}

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

このコードにより、Web ページ上のすべてのリンクに赤 (#A60500) の文字色。ユーザーがリンク上にマウスを移動すると、テキストの色が黒 (#640200) に変わり、背景も黒 (#000000) になります。

HTML で、複数のリンクを含むナビゲーション メニューを作成します。

<ul>

または、jQuery を使用して現在のページにクラスを動的に追加することもできますlink:

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

このスクリプトは、ページ上のすべてのリンクを反復処理し、現在の URL に一致するクラスにアクティブなクラスを追加します。その後、CSS を使用してアクティブなリンクのスタイルを変更し、現在のページのリンクの外観をカスタマイズできるようになります。

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