Wie kann ich aktuelle Seitenlinks mit CSS anders gestalten?

Linkstile für die aktuelle Seite mithilfe von CSS anpassen

Webentwickler möchten häufig das Erscheinungsbild von Links auf der aktuellen Seite von anderen unterscheiden . Ein gängiger Ansatz besteht darin, die Text- und Hintergrundfarben zu vertauschen.

Um diesen Effekt mit CSS zu erzielen, sollten Sie den folgenden Ansatz in Betracht ziehen:

li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}

Dieser Code stellt sicher, dass alle Links auf der Webseite ein haben rote Textfarbe (#A60500). Wenn ein Benutzer mit der Maus über einen Link fährt, ändert sich seine Textfarbe in Schwarz (#640200) und der Hintergrund wird schwarz (#000000).

Erstellen Sie im HTML ein Navigationsmenü mit mehreren Links:

Alternativ können Sie jQuery verwenden, um dynamisch eine Klasse zum aktuellen Seitenlink hinzuzufügen:

$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});

Dieses Skript Durchläuft alle Links auf der Seite und fügt die aktive Klasse derjenigen hinzu, die der aktuellen URL entspricht. CSS kann dann verwendet werden, um den aktiven Link anders zu gestalten, sodass Sie das Erscheinungsbild des aktuellen Seitenlinks anpassen können.

Das obige ist der detaillierte Inhalt vonWie kann ich aktuelle Seitenlinks mit CSS anders gestalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!