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

Mettre en surbrillance les liens de la page actuelle avec CSS

Question :

Comment puis-je modifier le style de liens sur la page courante pour les distinguer des autres ? Plus précisément, je souhaite échanger les couleurs du texte et de l'arrière-plan.

Solution CSS :

li a {
  color: #A60500;
}

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

Exemple :

Solution JavaScript :

Pour appliquer automatiquement le style actif, vous peut utiliser la fonction .each de jQuery :

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

Considérations :

• Pour une sélection de lien plus précise, envisagez d'utiliser un attribut de classe tel que "nav [href] ".
• Si vos URL incluent des paramètres de requête, pensez à les supprimer using :

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

Cette approche élimine le besoin de modifier manuellement chaque page et garantit un style cohérent sur les différentes URL de page.

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!