Comment styliser les liens de la page actuelle en CSS ?

Style des liens de la page actuelle en CSS : un guide complet

Souvent, les concepteurs cherchent à améliorer l'expérience utilisateur en distinguant le lien de la page actuelle de d’autres, soulignant son statut actif. Une approche efficace pour y parvenir consiste à utiliser CSS, offrant flexibilité et personnalisation facile.

Pour modifier l'apparence du lien de la page actuelle, CSS fournit une solution simple mais puissante :

<code class="css">a:active {
  color: #A60500;
  background-color: #000000;
}</code>

Avec ce code, les liens actuellement actifs s'afficheront avec une couleur de texte brun rougeâtre sur un fond noir. Cette différenciation visuelle aide les utilisateurs à naviguer sur le site de manière plus intuitive.

Pour des modifications plus avancées, jQuery offre un contrôle encore plus grand. En tirant parti de la fonction .each, vous pouvez parcourir tous les liens et appliquer dynamiquement la classe active au lien correspondant à l'URL de la page actuelle :

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

Ce code garantit que la classe active est uniquement ajoutée au lien qui correspond à la page actuelle, quelle que soit la structure de la page ou les URL spécifiques utilisées.

Pour affiner davantage la sélection des liens, pensez à utiliser des sélecteurs plus spécifiques, tels que $("nav [href]") si votre les liens sont situés dans un élément de navigation. De plus, si vos URL contiennent des paramètres, vous devrez peut-être les supprimer avant de comparer les URL pour tenir compte de ces variations.

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!