Comment puis-je mettre en évidence le lien de la page actuelle dans un menu de navigation à l'aide de CSS et jQuery ?

Comment changer la couleur du lien pour la page actuelle à l'aide de CSS et jQuery

Problème :

Comment modifier les couleurs du texte et du fond d'un lien pour mettre en évidence la page en cours dans une navigation menu ?

Solution CSS :

Pour le style de base, CSS fournit au li un sélecteur pour cibler tous les liens à l'intérieur des éléments de la liste :

li a {
  color: #A60500;
}

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

Cependant, cette approche ne distingue pas le lien de la page actuelle.

jQuery Solution :

Pour mettre en évidence dynamiquement le lien de la page actuelle, la fonction .each de jQuery peut être utilisée :

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

Ce code parcourt tous les liens, vérifie si leur href correspond au courant URL de la page et ajoute la classe "active" pour correspondre à l'URL prédéfinie styles.

Considérations :

• Affinez la sélection de liens à l'aide de sélecteurs CSS tels que $("nav [href]").
• Gérez les paramètres d'URL en les supprimant avec this.href.split("?")[0].
• Cette approche vous permet d'éviter les erreurs manuelles. changements sur chaque page et maintenir la cohérence dans le style des liens.

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!