# Set active to active url
jQuery(function(){
var current = location.pathname;
jQuery('.myclass').each(function(){
var $this = jQuery(this);
// si l'ancre de .myclass est le lien actuel, on ajoute la class .active
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
})
Ce snippet jQuery est utilisé pour mettre en évidence l'élément de navigation correspondant à la page actuellement affichée sur un site web. Il parcourt tous les éléments ayant la classe '.myclass', vérifie si l'attribut 'href' de chaque élément correspond à l'URL de la page actuelle (c'est-à-dire l'emplacement actuel du chemin), et si c'est le cas, il ajoute la classe 'active' à cet élément.
En pratique, cela permet de mettre en évidence visuellement l'élément de navigation de la page actuelle, ce qui peut améliorer la navigation et l'expérience utilisateur sur le site. La classe 'active' peut être stylisée à l'aide de CSS pour indiquer visuellement quelle page est actuellement active ou sélectionnée.
main.js. Vous pouvez ajouter ce code à ce fichier. Assurez-vous que ce fichier est correctement lié à votre page HTML en utilisant la balise <script src=""> dans votre HTML. Par exemple : <script src="path/to/your/main.js"></script>
<script>. Il est recommandé d'ajouter les scripts juste avant la fermeture de la balise </body> pour ne pas bloquer le chargement initial de la page. Voici comment vous pouvez le faire :
<script>
jQuery(function(){
var current = location.pathname;
jQuery('.myclass').each(function(){
var $this = jQuery(this);
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
})
</script
Notez que ce code suppose que vous avez déjà intégré la bibliothèque jQuery à votre site. Si ce n'est pas le cas, vous devez ajouter la balise suivante dans la section <head> de votre fichier HTML ou juste avant ce script : <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>