Wie kann ich aktuelle Seitenlinks mit CSS und jQuery hervorheben?

Aktuelle Seitenlinks mit CSS unterscheiden

Im Bereich Webdesign ist es oft wünschenswert, Links, die zur aktuellen Seite gehören, anders hervorzuheben als andere. Dies kann die Sichtbarkeit der Navigation verbessern und einen klaren Hinweis auf die Position der Seite geben.

Betrachten Sie das folgende Beispiel:

<code class="html"><ul id="navigation">
  <li class="a"><a href="/">Home</a></li>
  <li class="b"><a href="theatre.php">Theatre</a></li>
  <li class="c"><a href="programming.php">Programming</a></li>
</ul></code>

Um mit CSS den gewünschten Effekt zu erzielen, können wir auf das Container:

<code class="css">li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}</code>

Dieser Code wendet einen bestimmten Farb- und Hover-Effekt auf alle Links auf der Seite an. Um jedoch den Link zur aktuellen Seite hervorzuheben, können wir jQuery verwenden:

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

Dieses Skript durchläuft alle Links mit einem href-Attribut und prüft, ob die URL des Links mit der URL der aktuellen Seite übereinstimmt. Wenn ja, fügt es dem Link eine „aktive“ Klasse hinzu, die nach Wunsch gestaltet werden kann.

Das folgende CSS könnte zum Gestalten des aktiven Links verwendet werden:

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

Durch Kombinieren Mit CSS und jQuery können Sie mühelos eine visuelle Unterscheidung für den aktuellen Seitenlink erstellen und so das Benutzererlebnis und die Seitennavigation verbessern.

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