Wie formatiere ich aktuelle Seitenlinks in CSS?

Links zu aktuellen Seiten in CSS gestalten: Ein umfassender Leitfaden

Oft versuchen Designer, die Benutzererfahrung zu verbessern, indem sie den Link der aktuellen Seite von anderen unterscheiden andere, was den aktiven Status hervorhebt. Ein effektiver Ansatz, dies zu erreichen, ist CSS, das Flexibilität und einfache Anpassung bietet.

Um das Erscheinungsbild des Links der aktuellen Seite zu ändern, bietet CSS eine einfache, aber leistungsstarke Lösung:

<code class="css">a:active {
  color: #A60500;
  background-color: #000000;
}</code>

Mit Mit diesem Code werden aktuell aktive Links mit einer rötlich-braunen Textfarbe auf schwarzem Hintergrund angezeigt. Diese visuelle Differenzierung hilft Benutzern, sich intuitiver auf der Website zurechtzufinden.

Für fortgeschrittenere Änderungen bietet jQuery noch mehr Kontrolle. Mithilfe der .each-Funktion können Sie alle Links durchlaufen und die aktive Klasse dynamisch auf den Link anwenden, der der URL der aktuellen Seite entspricht:

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

Dieser Code stellt sicher, dass die aktive Klasse nur dem Link hinzugefügt wird die der aktuellen Seite entspricht, unabhängig von der Seitenstruktur oder den verwendeten spezifischen URLs.

Um die Auswahl der Links weiter zu verfeinern, sollten Sie die Verwendung spezifischerer Selektoren in Betracht ziehen, z. B. $("nav [href]"), wenn Sie möchten Links befinden sich innerhalb eines Navigationselements. Wenn Ihre URLs außerdem Parameter enthalten, müssen Sie diese möglicherweise vor dem Vergleich von URLs entfernen, um diese Variationen zu berücksichtigen.

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