Comment puis-je ajouter une classe « active » à mon menu de navigation pour mettre en surbrillance la page actuelle ?

Ajouter une classe de navigation active pour refléter la page actuelle

Dans le développement Web, il est courant de mettre en surbrillance l'élément de menu représentant la page actuellement active. Pour y parvenir, vous pouvez ajouter dynamiquement une classe « active » à l’élément de liste de menu correspondant. Voici comment procéder en utilisant JavaScript :

JavaScript Code :

<br>$(function(){</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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 :

Cet extrait de code permet d'obtenir le résultat souhaité en lier un gestionnaire d'événements à l'événement ready du document (qui se déclenche lorsque la page est complètement chargée). Il parcourt ensuite chaque lien du menu et vérifie si son attribut href correspond au nom de chemin de la page actuelle. Si une correspondance est trouvée, la classe « active » est ajoutée au lien correspondant, indiquant visuellement que l'utilisateur se trouve sur la page correspondante.

Application du code :

Pour implémenter cette fonctionnalité sur votre site Web, copiez et collez simplement le code JavaScript dans l'en-tête de votre page. Assurez-vous que le code se trouve dans le <script></script> balises et que vous incluiez la bibliothèque jQuery comme prérequis.

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!