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

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

CSS スタイリング

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

li a {
  color: #A60500;
}

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

jQuery スクリプト

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

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

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

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

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

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