Heim >Web-Frontend >CSS-Tutorial >Wie kann ich den Link zur aktuellen Seite mithilfe von CSS und jQuery unterschiedlich gestalten?

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

Linda Hamilton
Linda HamiltonOriginal
2024-12-15 17:59:10644Durchsuche

How Can I Style the Current Page Link Differently Using CSS and jQuery?

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!

    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn