Wie kann ich aktuelle Seitenlinks mit CSS und jQuery unterschiedlich formatieren?

CSS-Link-Styling für die aktuelle Seite

Im Bereich Webdesign kann das Styling von Links oft ein entscheidender Aspekt für die Verbesserung der Benutzererfahrung sein Website-Ästhetik. Wenn Sie das Erscheinungsbild von Links für die aktuelle Seite von anderen unterscheiden möchten, bietet CSS eine einfache Lösung.

Implementierung mit CSS

Das Hinzufügen der folgenden CSS-Regeln ermöglicht dies Sie können die Text- und Hintergrundfarben für aktuelle Links austauschen Seite:

li a {
  color: #A60500;
}

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

Beispiel

Beachten Sie die folgende HTML-Struktur:

Mit den angewendeten CSS-Regeln der Link für die aktuelle Auf der Seite (z. B. „/programming.php“) werden die Text- und Hintergrundfarben vertauscht, wenn die Seite geladen wird oder der Benutzer mit der Maus darüber fährt it.

Dynamisches Styling mit jQuery

Wenn Sie einen dynamischeren Ansatz bevorzugen, bietet jQuery den folgenden Code, um ähnliche Ergebnisse zu erzielen:

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

Dieser Code durchläuft alle Links auf der Seite und fügt dem Link eine „aktive“ Klasse hinzu, die der aktuellen URL entspricht. Anschließend können Sie CSS verwenden, um die „aktive“ Klasse wie gewünscht zu formatieren.

Durch die Nutzung dieser Techniken können Sie mühelos das Erscheinungsbild von Links für die aktuelle Seite ändern und so sowohl die visuelle Attraktivität als auch die Benutzererfahrung Ihrer Website verbessern .

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