Comment puis-je mettre en surbrillance dynamique les éléments de menu actifs en fonction de l'URL ?

Mise en surbrillance dynamique des éléments de menu actifs en fonction de l'URL de la page

L'une des tâches courantes lors du développement d'un site Web consiste à mettre en évidence l'élément de menu actuellement actif en fonction de l'URL de la page consultée. Cela améliore la navigation de l'utilisateur et fournit un repère visuel pour l'emplacement actuel de l'utilisateur dans la hiérarchie du site Web.

Implémentation de la solution

JavaScript est généralement utilisé pour implémenter ce comportement de manière dynamique. Cependant, des pièges courants surviennent lors de l'utilisation d'approches événementielles (par exemple, cliquer sur des éléments de menu), qui ne reflètent pas avec précision le processus de chargement de la page.

Pour ajouter efficacement la classe « active » à l'élément de menu approprié lors chargement de la page, envisagez l'approche suivante :

$(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');
        }
    })
})

Explication

Dans ce code extrait :

• $(function(){...}) garantit que le code s'exécute une fois la page entièrement chargée.
• var current = location.pathname; récupère le chemin de l'URL actuelle.
• $('#nav li a').each(function(){...}) parcourt tous les éléments de menu (balises d'ancrage) dans l'élément #nav.
• var $this = $(this) ; stocke l'élément de menu en cours de traitement.
• if($this.attr('href').indexOf(current) !== -1){...} vérifie si le chemin de l'URL actuel contient l'attribut href de l'élément de menu, indiquant qu'il s'agit de la page active.
• $this.addClass('active' ); ajoute la classe « active » à l'élément de menu approprié.

Cette approche met en évidence avec précision l'élément de menu actif lors du chargement de la page, garantissant ainsi une cohérence et une convivialité expérience de navigation.

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!