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 :

<ul>

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 :

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!