Comment mettre en évidence les liens de la page actuelle avec CSS et jQuery ?

Distinguer les liens de la page actuelle avec CSS

Dans le domaine de la conception Web, il est souvent souhaitable de mettre en évidence les liens correspondant à la page actuelle différemment des autres. Cela peut améliorer la visibilité de la navigation et fournir une indication claire de l'emplacement de la page.

Considérons l'exemple suivant :

<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>

Pour obtenir l'effet souhaité en utilisant CSS, nous pouvons cibler le conteneurs :

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

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

Ce code applique une couleur distincte et un effet de survol à tous les liens de la page. Cependant, pour mettre en évidence le lien de la page actuelle, nous pouvons utiliser jQuery :

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

Ce script parcourt tous les liens avec un attribut href et vérifie si l'URL du lien correspond à l'URL de la page actuelle. Si tel est le cas, il ajoute une classe « active » au lien, qui peut être stylisée comme vous le souhaitez.

Le CSS suivant peut être utilisé pour styliser le lien actif :

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

En combinant CSS et jQuery, vous pouvez facilement créer une distinction visuelle pour le lien de la page actuelle, améliorant ainsi l'expérience utilisateur et la navigation sur le site.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!