Wie ändere ich dynamisch die Farbe von Links für die aktuelle Seite?

Ändern der Farbe von Links für die aktuelle Seite

Das Ändern des Erscheinungsbilds von Links für die aktuell angezeigte Seite kann die Benutzererfahrung verbessern visuelle Hinweise. Eine gängige Technik besteht darin, die Farben von Text und Hintergrund zu vertauschen, um den aktuellen Link hervorzuheben.

Um diesen Effekt zu erzielen, können CSS und JavaScript eingesetzt werden. CSS definiert das gewünschte Erscheinungsbild der Links, während JavaScript die aktuelle Seite dynamisch identifiziert und den Stil entsprechend anwendet.

So implementieren Sie diese Lösung:

1. CSS-Stil:

   • Definieren Sie den Basisstil für alle Links:

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

   • Geben Sie den Stil für aktive Links an:

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

2. JavaScript:

   • Verwenden Sie die .each-Funktion, um die Links zu durchlaufen:

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

   • Optional die Linkauswahl eingrenzen:

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

   • URL-Parameter bei Bedarf behandeln:

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

Durch die Implementierung dieser Lösung wird sich der aktuelle Seitenlink optisch von anderen unterscheiden und den Benutzern einen klaren Hinweis geben.

Das obige ist der detaillierte Inhalt vonWie ändere ich dynamisch die Farbe von Links für die aktuelle Seite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!