Comment puis-je styliser différemment le lien de la page actuelle en utilisant CSS et jQuery ?

Styliser différemment le lien de la page actuelle avec CSS

Lors de la navigation sur un site Web, distinguer visuellement la page actuelle des autres améliore l'expérience utilisateur. Cet article explore une solution CSS pour changer la couleur du lien pour la page actuellement active.

Considérez la structure HTML suivante :

<ul>

Pour commencer, nous utiliserons CSS pour styliser tous les liens. :

li a {
  color: #A60500;
}

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

Maintenant, abordons le CSS du lien de la page actuelle. En utilisant jQuery, nous pouvons parcourir tous les liens et vérifier si leur attribut href correspond à l'URL de la page actuelle :

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

Avec cet ajout, les liens qui pointent vers la page actuelle recevront la classe "active". Nous pouvons ensuite améliorer le CSS pour changer la couleur du lien pour les éléments de cette classe :

.active {
  color: #FFEE00;
}

Cependant, il est important de noter les considérations suivantes :

<ul>

En fonction de la structure de la page , il peut être nécessaire de restreindre la sélection des liens.

Si des paramètres d'URL sont utilisés, il peut être nécessaire de les supprimer pour garantir l'exactitude des liens. correspondant.

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!