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

CSS を使用した現在のページ リンクの色の変更

現在のページ リンクの外観の操作は、一般的な CSS スタイル要件です。他のページリンクと区別するために、ユーザーはテキストと背景の色を交換することを好むことがよくあります。スタイリング リクエストに対する包括的なソリューションは次のとおりです:

CSS スタイリング

現在のページ リンクのスタイルを設定するには、次の CSS ルールをスタイルシートに追加します:

<code class="css">li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}</code>

jQuery スクリプト

提供された jQuery スクリプトを使用すると、現在のページ リンクを識別し、それにクラスを動的に追加できます。

<code class="javascript">$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});</code>

特定のページ構造によっては、セレクターを調整する必要がある場合があります。リンク ($("[href]"))。たとえば、リンクが nav 要素内に含まれている場合、選択を $("nav [href]") に絞り込むことができます。

ページで URL パラメーターが使用されている場合は、URL パラメーターを比較する前にそれらを削除できます。現在のページのリンクが確実に認識されるようにするためのリンク:

<code class="javascript">if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...</code>

このアプローチにより、各ページの CSS スタイルを個別に変更する必要がなくなります。

以上がCSSとjQueryを使用して現在のページリンクの色を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。