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

CSS を使用して現在のページ リンクのスタイルを変える

Web サイト内を移動するときに、現在のページを他のページから視覚的に区別すると、ユーザー エクスペリエンスが向上します。この記事では、現在アクティブなページのリンクの色を変更する CSS ソリューションについて説明します。

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

<ul>

まず、CSS を使用してすべてのリンクのスタイルを設定します。 :

li a {
  color: #A60500;
}

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

次に、現在のページのリンクの CSS を指定しましょう。 jQuery を使用すると、すべてのリンクを反復処理して、その href 属性が現在のページの URL と一致するかどうかを確認できます。

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

これを追加すると、現在のページを指すリンクは「active」クラスを受け取ります。次に、CSS を拡張して、そのクラスの要素のリンクの色を変更できます:

.active {
  color: #FFEE00;
}

ただし、次の考慮事項に注意することが重要です:

<ul>

ページの構造に応じて

URL パラメータが使用されている場合、正確性を確保するためにパラメータを削除する必要がある場合があります。一致します。

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