CSS で現在のページのリンクをスタイル設定するには?

CSS で現在のページのリンクをスタイリングする: 総合ガイド

多くの場合、デザイナーは現在のページのリンクを区別することでユーザー エクスペリエンスを向上させようとします。その他、アクティブなステータスを強調表示します。これを実現するための効果的なアプローチの 1 つは、柔軟性と簡単なカスタマイズを提供する CSS を使用することです。

現在のページのリンクの外観を変更するために、CSS はシンプルかつ強力なソリューションを提供します。

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

このコードを実行すると、現在アクティブなリンクが黒の背景に赤茶色のテキスト色で表示されます。この視覚的な差別化により、ユーザーはサイトをより直観的に移動できるようになります。

より高度な変更については、jQuery を使用するとさらに優れた制御が可能になります。 .each 関数を利用すると、すべてのリンクを反復処理し、現在のページの URL に一致するリンクにアクティブ クラスを動的に適用できます。

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

このコードにより、アクティブ クラスはリンクにのみ追加されます。これは、ページ構造や使用されている特定の URL に関係なく、現在のページに対応します。

リンクの選択をさらに絞り込むには、$("nav [href]") などのより具体的なセレクターの使用を検討してください。リンクはナビゲーション要素内にあります。さらに、URL にパラメータが含まれている場合は、これらの変動を考慮して、URL を比較する前にパラメータを削除する必要がある場合があります。

以上がCSS で現在のページのリンクをスタイル設定するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。