Wie ändere ich die Farbe aktueller Seitenlinks mithilfe von CSS und jQuery?

So ändern Sie die Linkfarbe der aktuellen Seite mit CSS und jQuery

Es ist üblich, Links für die aktuelle Seite anders zu gestalten als für andere Aufgabe in der Webentwicklung. Eine Möglichkeit, dies zu erreichen, ist die Verwendung von CSS und jQuery.

Verwendung von CSS

Um die Links auf der aktuellen Seite zu gestalten, können Sie das folgende CSS verwenden:

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

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

Dieser Code ändert die Farbe aller Links auf der Seite in #A60500. Wenn Sie mit der Maus über einen Link fahren, ändert sich seine Farbe in #640200 und seine Hintergrundfarbe in #000000.

Mit jQuery

Sie können auch jQuery verwenden um die Linkfarbe der aktuellen Seite zu ändern. Dazu können Sie den folgenden Code verwenden:

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

Dieser Code durchläuft alle Links auf der Seite und fügt die Klasse „aktiv“ dem Link hinzu, der mit der URL der aktuellen Seite übereinstimmt. Anschließend können Sie CSS verwenden, um die „aktive“ Klasse anders zu gestalten, beispielsweise ihre Farbe zu ändern.

Hinweis: Der jQuery-Code muss möglicherweise je nach Struktur Ihrer Seite und geändert werden welche Links verwendet werden. Möglicherweise müssen Sie die Auswahl der Links eingrenzen oder URL-Parameter entfernen, um sicherzustellen, dass der Link richtig gestaltet ist.

Das obige ist der detaillierte Inhalt vonWie ändere ich die Farbe aktueller Seitenlinks mithilfe von CSS und jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!