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

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

現在のページのリンクを他とは異なるスタイルで設定するのが一般的ですWeb開発におけるタスク。これを実現する 1 つの方法は、CSS と jQuery を使用することです。

CSS の使用

現在のページのリンクのスタイルを設定するには、次の CSS を使用できます:

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

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

このコードは、ページ上のすべてのリンクの色を #A60500 に変更します。リンクにマウスを置くと、その色は #640200 に変わり、背景色は #000000 に変わります。

jQuery の使用

jQuery を使用することもできます。現在のページのリンクの色を変更します。これを行うには、次のコードを使用できます。

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

このコードは、ページ上のすべてのリンクをループし、現在のページの URL に一致するリンクに「アクティブ」クラスを追加します。その後、CSS を使用して、色を変更するなど、「アクティブ」クラスのスタイルを変更できます。

注: ページの構造に応じて、jQuery コードの変更が必要になる場合があります。使用されているリンク。正しいリンクのスタイルを確保するには、リンクの選択を絞り込むか、URL パラメーターを削除する必要がある場合があります。

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