Changer la couleur du lien de la page actuelle avec CSS

La manipulation de l'apparence du lien de la page actuelle est une exigence de style CSS courante. Pour le distinguer des autres liens de page, les utilisateurs préfèrent souvent échanger les couleurs du texte et de l’arrière-plan. Voici une solution complète pour votre demande de style :

Style CSS

Pour styliser le lien de la page actuelle, ajoutez les règles CSS suivantes à votre feuille de style :

li a {
  color: #A60500;
}

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

Script jQuery

Le script jQuery fourni vous permet d'identifier le lien de la page actuelle et d'y ajouter dynamiquement une classe :

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

En fonction de la structure spécifique de votre page, vous devrez peut-être affiner le sélecteur de liens ($("[href]")). Par exemple, si les liens sont contenus dans un élément de navigation, vous pouvez affiner la sélection à $("nav [href]").

Si votre page utilise des paramètres d'URL, vous pouvez les supprimer avant de comparer les liens pour garantir que le lien de la page actuelle est reconnu :

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

Cette approche élimine le besoin de modifier le style CSS pour chaque page individuellement.