Wie kann ich den Link zur aktuellen Seite mithilfe von CSS und jQuery unterschiedlich gestalten?

Den Link zur aktuellen Seite mit CSS anders gestalten

Beim Navigieren durch eine Website verbessert die visuelle Unterscheidung der aktuellen Seite von anderen das Benutzererlebnis. In diesem Artikel wird eine CSS-Lösung zum Ändern der Linkfarbe für die aktuell aktive Seite untersucht.

Bedenken Sie die folgende HTML-Struktur:

<ul>

Zunächst verwenden wir CSS, um alle Links zu formatieren :

li a {
  color: #A60500;
}

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

Befassen wir uns nun mit dem CSS für den aktuellen Seitenlink. Mit jQuery können wir alle Links durchlaufen und prüfen, ob ihr href-Attribut mit der URL der aktuellen Seite übereinstimmt:

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

Mit diesem Zusatz erhalten Links, die auf die aktuelle Seite verweisen, die Klasse „aktiv“. Anschließend können wir das CSS erweitern, um die Linkfarbe für Elemente mit dieser Klasse zu ändern:

.active {
  color: #FFEE00;
}

Es ist jedoch wichtig, die folgenden Überlegungen zu beachten:

<ul>

Abhängig von der Seitenstruktur Möglicherweise ist eine Eingrenzung der Linkauswahl erforderlich.

Wenn URL-Parameter verwendet werden, kann es erforderlich sein, diese zu entfernen, um die Genauigkeit sicherzustellen passend.

Das obige ist der detaillierte Inhalt vonWie kann ich den Link zur aktuellen Seite mithilfe von CSS und jQuery unterschiedlich gestalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!