Comment JavaScript peut-il ajouter une classe « active » aux liens de navigation en fonction de l'URL actuelle ?

Ajout d'une classe de navigation active basée sur l'URL : un guide avec JavaScript

La navigation sur des sites Web complexes nécessite que les utilisateurs identifient efficacement la page actuelle dans le menu structure. Pour améliorer l'expérience utilisateur, il est crucial d'ajouter une classe active à l'élément de navigation correspondant à la page actuelle lors du chargement de la page.

Le code JavaScript fourni n'atteint malheureusement pas cet objectif car il répond aux clics de l'utilisateur et non au chargement des pages. . Pour résoudre ce problème, nous devons exécuter JavaScript qui inspecte l'URL de la page actuelle et ajoute dynamiquement la classe active à l'élément de menu approprié.

Voici un bloc JavaScript révisé qui accomplit cette tâche :

$(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 exploite jQuery pour parcourir le lien de chaque élément de menu et comparer son attribut href au nom de chemin de la page actuelle. En cas de correspondance, la classe active est ajoutée au lien correspondant.

En utilisant une exécution JavaScript appropriée et des comparaisons logiques, nous pouvons ajouter élégamment la classe active à l'élément de navigation correct, améliorant ainsi la clarté de la navigation sur le 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!