Comment changer dynamiquement la couleur des liens pour la page actuelle ?

Changer la couleur des liens pour la page actuelle

Modifier l'apparence des liens pour la page actuellement consultée peut améliorer l'expérience utilisateur en fournissant des repères visuels. Une technique courante consiste à échanger les couleurs du texte et de l'arrière-plan pour faire ressortir le lien actuel.

Pour obtenir cet effet, CSS et JavaScript peuvent être utilisés. CSS définit l'apparence souhaitée des liens, tandis que JavaScript identifie dynamiquement la page actuelle et applique le style en conséquence.

Voici comment mettre en œuvre cette solution :

1. Style CSS :

   • Définissez le style de base pour tous les liens :

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

   • Spécifiez le style des liens actifs :

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

2. JavaScript :

   • Utilisez la fonction .each pour parcourir les liens :

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

   • Facultativement, affinez la sélection de liens :

     <code class="javascript">$("nav [href]").each ...</code>

   • Gérez les paramètres d'URL si nécessaire :

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

En mettant en œuvre cette solution, le lien de la page actuelle sera visuellement distinct des autres, fournissant une indication claire aux utilisateurs.

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!