Comment puis-je styliser différemment les liens de la page actuelle en utilisant CSS et jQuery ?

Style de lien CSS pour la page actuelle

Dans le domaine de la conception Web, le style des liens peut souvent être un aspect crucial pour améliorer l'expérience utilisateur et esthétique du site Web. Si vous cherchez à différencier l'apparence des liens de la page actuelle des autres, CSS offre une solution simple.

Implémentation avec CSS

L'ajout des règles CSS suivantes permettra vous d'échanger les couleurs du texte et de l'arrière-plan contre les liens sur le site actuel page :

li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}

Exemple

Considérez la structure HTML suivante :

<ul>

Avec les règles CSS appliquées, le lien vers le courant la page (par exemple, "/programming.php") les couleurs du texte et de l'arrière-plan seront inversées lorsque la page se chargera ou que l'utilisateur survolera it.

Style dynamique avec jQuery

Si vous préférez une approche plus dynamique, jQuery fournit le code suivant pour obtenir des résultats similaires :

$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});

Ce code parcourt tous les liens de la page et ajoute une classe « active » au lien qui correspond à l'URL actuelle. Vous pouvez ensuite utiliser CSS pour styliser la classe « active » comme vous le souhaitez.

En tirant parti de ces techniques, vous pouvez facilement modifier l'apparence des liens de la page actuelle, améliorant ainsi à la fois l'attrait visuel et l'expérience utilisateur de votre site Web. .

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!