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

現在のページの CSS リンク スタイル

Web デザインの領域では、リンクのスタイル設定はユーザー エクスペリエンスとユーザー エクスペリエンスを向上させるための重要な要素となることがよくあります。ウェブサイトの美学。現在のページのリンクの外観を他のページと区別したい場合、CSS が簡単な解決策を提供します。

CSS による実装

次の CSS ルールを追加すると、次のことが可能になります。現在のリンクのテキストと背景の色を交換できます。ページ:

li a {
  color: #A60500;
}

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

例

次の HTML 構造を考えてみましょう:

<ul>

CSS ルールが適用された場合、現在のページ (例: "/programming.php") では、ページの読み込み時にテキストと背景の色が交換されます。ユーザーはその上にマウスを移動します。

jQuery による動的スタイリング

より動的なアプローチを希望する場合、jQuery は同様の結果を達成する次のコードを提供します。

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

このコードは、ページ上のすべてのリンクを反復処理し、現在の URL に一致するリンクに「アクティブ」クラスを追加します。その後、CSS を使用して、必要に応じて「アクティブ」クラスのスタイルを設定できます。

これらのテクニックを活用すると、現在のページのリンクの外観を簡単に変更でき、Web サイトの視覚的な魅力とユーザー エクスペリエンスの両方を向上させることができます。 .

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