Comment puis-je styliser différemment les liens de la page actuelle avec CSS ?

Personnalisation des styles de liens pour la page actuelle à l'aide de CSS

Souvent, les développeurs Web souhaitent différencier l'apparence des liens sur la page actuelle des autres . Une approche courante consiste à échanger les couleurs du texte et de l'arrière-plan.

Pour obtenir cet effet avec CSS, envisagez l'approche suivante :

li a {
  color: #A60500;
}

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

Ce code garantit que tous les liens de la page Web ont un couleur du texte rouge (#A60500). Lorsqu'un utilisateur survole un lien, la couleur de son texte passe au noir (#640200) et l'arrière-plan devient noir (#000000).

Dans le HTML, créez un menu de navigation avec plusieurs liens :

<ul>

Vous pouvez également utiliser jQuery pour ajouter dynamiquement une classe au lien de la page actuelle :

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

Ce script parcourt tous les liens de la page et ajoute la classe active à celle qui correspond à l'URL actuelle. CSS peut ensuite être utilisé pour styliser différemment le lien actif, vous permettant de personnaliser l'apparence du lien de la page actuelle.

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!