Comment changer la couleur du lien de la page actuelle avec CSS et jQuery ?

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 :

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

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

Script jQuery

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

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

En fonction de la structure spécifique de votre page, vous devrez peut-être affiner le sélecteur pour 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 :

<code class="javascript">if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...</code>

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

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!