Maison > interface Web > tutoriel CSS > Comment puis-je mettre en surbrillance dynamique les éléments de menu actifs en fonction de l'URL ?

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

Patricia Arquette
Libérer: 2024-12-15 05:32:09
original
376 Les gens l'ont consulté

How Can I Dynamically Highlight Active Menu Items Based on the 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');
        }
    })
})
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal