Maison  >  Article  >  interface Web  >  Comment changer dynamiquement la couleur des liens pour la page actuelle ?

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

DDD
DDDoriginal
2024-10-20 09:39:02752parcourir

How to Dynamically Change the Color of Links for the Current Page?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn