Comment puis-je ajouter dynamiquement des classes de navigation actives au menu de mon site Web à l'aide de JavaScript ?

Ajouter des classes de navigation actives dynamiques aux menus

Lors de la navigation sur une page Web, il est courant de mettre en surbrillance l'élément de menu actif correspondant à la page actuelle . Cela améliore l'expérience utilisateur en fournissant des repères visuels pour l'emplacement actuel dans la hiérarchie du site.

Pour implémenter cette fonctionnalité, nous utiliserons JavaScript pour identifier l'URL actuelle et ajouterons une classe « active » à l'élément de menu approprié. .

Comment ajouter une classe de navigation active à l'aide de JavaScript

Examinons une solution utilisant le puissant bibliothèque :

$(function () {
    var current = location.pathname;
    $('#nav li a').each(function () {
        var $this = $(this);
        if ($this.attr('href').indexOf(current) !== -1) {
            $this.addClass('active');
        }
    });
});

Explication :

• Lorsque le document est prêt, le script s'initialise.
• La propriété location.pathname récupère le chemin de la page actuelle.
• Il parcourt les balises d'ancrage de chaque élément de menu ($('#nav li a')).
• Pour chaque balise d'ancrage, il vérifie si son attribut href contient le chemin actuel à l'aide de la fonction indexOf().
• S'il trouve une correspondance, la balise d'ancrage correspondante est attribué la classe "active".

Remarque importante :

Si le menu contient plusieurs des liens pointant vers la même page, cette approche peut ne pas déterminer avec précision l'élément actif. Dans de tels scénarios, une logique supplémentaire peut être nécessaire pour gérer ces cas.

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!