Définition d'un élément de menu actif en fonction de l'URL actuelle avec jQuery

Ce problème apparaît encore et encore lors de la création de sites Web: comment déterminer l'emplacement actuel de l'utilisateur afin de pouvoir mettre en évidence la section active dans le menu de navigation? C'est un besoin tellement basique mais la solution semble être réinventée à chaque nouvelle construction.

Il existe deux voies principales que vous pouvez emprunter pour résoudre ce problème de manière dynamique, côté serveur et côté client. Résoudre ce problème côté serveur est bien car vous aurez une meilleure gestion de la page demandée, mais ce n'est pas toujours pratique. Avec un peu de planification, il est assez simple de résoudre ce problème côté client en utilisant JavaScript (et éventuellement jQuery).

Supposons que vous ayez un menu de navigation de base dans votre en-tête et que vous souhaitiez modifier la couleur d'arrière-plan de la page actuelle sur laquelle vous vous trouvez.

Idéalement, lorsque vous cliquez sur Visite et que vous êtes redirigé vers la page Visite, vous souhaitez que le menu reflète votre emplacement actuel.

Pour ce faire en utilisant jQuery, nous allons comparer l'attribut href de chaque lien de menu à l'URL actuelle du navigateur et essayer de trouver une correspondance. Si une correspondance est trouvée, nous définirons cet élément sur actif en ajoutant une classe au

  • élément.

    Le résultat net de cet exemple très basique ressemble à ceci

    À chaque chargement de page, ce script exécute et compare le href de chaque lien de menu à l'URL de la page actuelle en commençant après le nom de domaine et en continuant en avant pour autant de caractères qu'il en existe dans le href (similaire à une fonction startsWith ()). Cela permet à toutes les sous-pages de «Tour» de marquer également Tour comme section active, par exemple /tour/section2.html. Lorsqu'une correspondance est trouvée, l'élément parent - dans ce cas, un

  • - a une classe «active» ajoutée.

    Cette solution peut être trouvée sur jsFiddle pour une utilisation et est également intégrée ci-dessous. La principale chose que vous devrez changer pour vos propres besoins est le sélecteur «.nav» à la ligne 9 du JavaScript. Cela doit être modifié pour sélectionner l'élément de navigation que vous souhaitez traiter.

    Notez que l'exemple jsFiddle ne fonctionnera pas car vous ne pouvez pas réellement modifier l'URL dans la fenêtre de résultat, mais vous pouvez facilement copier le code dans un fichier HTML pour le tester.