CSS と jQuery を使用して現在のページのリンクを強調表示する方法

CSS を使用して現在のページのリンクを区別する

Web デザインの領域では、現在のページに対応するリンクを他のページとは異なる方法で強調表示することが望ましいことがよくあります。これにより、ナビゲーションの可視性が向上し、ページの位置を明確に示すことができます。

次の例を考えてみましょう:

<code class="html"><ul id="navigation">
  <li class="a"><a href="/">Home</a></li>
  <li class="b"><a href="theatre.php">Theatre</a></li>
  <li class="c"><a href="programming.php">Programming</a></li>
</ul></code>

CSS を使用して目的の効果を実現するには、 内の要素コンテナ:

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

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

このコードは、ページ上のすべてのリンクに個別の色とホバー効果を適用します。ただし、現在のページのリンクを強調表示するには、jQuery を使用できます。

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

このスクリプトは、href 属性を持つすべてのリンクを反復処理し、リンクの URL が現在のページの URL と一致するかどうかを確認します。その場合、リンクに「アクティブ」クラスが追加され、必要に応じてスタイルを設定できます。

アクティブなリンクのスタイルを設定するには、次の CSS を使用できます:

<code class="css">.active {
  color: #FFFFFF;
  background-color: #000000;
}</code>

を組み合わせることで、 CSS と jQuery を使用すると、現在のページ リンクを視覚的に区別することが簡単に作成でき、ユーザー エクスペリエンスとサイト ナビゲーションが向上します。

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