Comment changer la couleur des liens de la page actuelle à l'aide de CSS et jQuery ?

Comment changer la couleur des liens de la page actuelle avec CSS et jQuery

Le style des liens pour la page actuelle différemment des autres est une pratique courante tâche dans le développement Web. Une façon d'y parvenir consiste à utiliser CSS et jQuery.

Utiliser CSS

Pour styliser les liens sur la page actuelle, vous pouvez utiliser le CSS suivant :

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

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

Ce code changera la couleur de tous les liens de la page en #A60500. Lorsqu'un lien est survolé, sa couleur passe à #640200 et sa couleur d'arrière-plan passe à #000000.

Utiliser jQuery

Vous pouvez également utiliser jQuery pour changer la couleur du lien de la page actuelle. Pour ce faire, vous pouvez utiliser le code suivant :

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

Ce code parcourra tous les liens de la page et ajoutera la classe "active" au lien qui correspond à l'URL de la page actuelle. Vous pouvez ensuite utiliser CSS pour styliser différemment la classe "active", par exemple en changeant sa couleur.

Remarque : Le code jQuery devra peut-être être modifié en fonction de la structure de votre page et les liens utilisés. Vous devrez peut-être affiner la sélection de liens ou supprimer les paramètres d'URL pour garantir que le style du lien est correct.

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!