現在のページのリンクの色を動的に変更するにはどうすればよいですか?

現在のページのリンクの色の変更

現在表示されているページのリンクの外観を変更すると、以下を提供することでユーザー エクスペリエンスが向上します。視覚的な手がかり。一般的なテクニックの 1 つは、テキストと背景の色を交換して、現在のリンクを目立たせることです。

この効果を実現するには、CSS と JavaScript を使用できます。 CSS はリンクの望ましい外観を定義しますが、JavaScript は現在のページを動的に識別し、それに応じてスタイルを適用します。

このソリューションを実装する方法は次のとおりです。

1. CSS スタイル:

   • すべてのリンクの基本スタイルを定義します:

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

     ログイン後にコピー

   • アクティブなリンクのスタイルを指定します:

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

     ログイン後にコピー

2. JavaScript:

   • .each 関数を使用してリンクを反復処理します。

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

     ログイン後にコピー

   • オプションで、リンクの選択を絞り込みます:

     <code class="javascript">$("nav [href]").each ...</code>

     ログイン後にコピー

   • 必要に応じて URL パラメータを処理します:

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

     ログイン後にコピー

このソリューションを実装すると、現在のページのリンクが他のページから視覚的に区別され、ユーザーに明確な表示が提供されます。

以上が現在のページのリンクの色を動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。