Comment ajouter dynamiquement une classe « active » aux liens de navigation en fonction de l'URL actuelle ?

Ajouter une classe de navigation active pour refléter l'URL actuelle

La navigation sur un site Web nécessite souvent une indication visible de la page actuelle, ce qui peut être obtenu en ajout d'une classe "active" à l'élément de menu correspondant. Cet article montre comment implémenter cette fonctionnalité à l'aide de JavaScript.

Considérez l'exemple de menu de navigation ci-dessous, où le lien « Gérer » doit apparaître comme « actif » sur la page « manageIS.aspx » :

<ul>

L'extrait JavaScript suivant produira l'effet souhaité :

$(function(){
    var current = location.pathname;
    $('#nav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})

Ce code attribue le chemin d'accès de la page actuelle au variable "actuelle". Il parcourt ensuite tous les liens de menu et vérifie si leur attribut "href" correspond au chemin actuel. Si une correspondance est trouvée, la classe « active » est ajoutée à ce lien.

Contrairement au JavaScript d'origine fourni dans la question, cette approche ne repose pas sur des événements de clic et est exécutée au chargement de la page. Par conséquent, la classe « active » persiste tout au long de la durée de vie de la page, fournissant à tout moment une indication claire de la page actuelle.

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!