Voici quelques titres basés sur des questions qui correspondent à l'article : **Plus court

Surmonter les défis avec la classe de navigation active de Bootstrap

Lors de la personnalisation des menus de navigation dans Bootstrap, un problème peut survenir lorsque la classe active ne parvient pas à changer lors du défilement ou du clic sur les éléments de menu . Cela peut provenir de modifications CSS sans prise en charge JavaScript appropriée.

Améliorations CSS

Le HTML et le CSS fournis ressemblent à la structure et au style du menu par défaut de Bootstrap. Pour reproduire leur comportement de sous-navigation, des modifications supplémentaires sont nécessaires.

Implémentation de jQuery

L'intégration de jQuery est nécessaire pour manipuler le DOM et contrôler l'état actif des liens de navigation. Le code suivant sert à cet effet :

<code class="javascript">$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});</code>

Répartition des fonctions

• Le code sélectionne tous les éléments de liste (li) dans un élément avec la classe "navbar".
• Lorsque vous cliquez sur un élément de liste, il supprime la classe active de tout élément précédemment actif.
• L'état de l'élément de liste actuel est évalué et s'il n'est pas déjà actif, il reçoit la classe active.
• L'utilisation de e.preventDefault(); empêche la page de défiler jusqu'à la cible du lien cliqué.

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!