Voici quelques options de titre, en gardant à l'esprit le format de la question et en vous concentrant sur le contenu principal de l'article : **Option 1 (directe et claire) :** * **Comment créer un menu de navigation actif simplifié

Modification de la navigation active Bootstrap

Le site Web de Bootstrap dispose d'un sous-nav qui fait correspondre sans effort les sections et modifie les couleurs d'arrière-plan en fonction des entrées de l'utilisateur. Cet article vise à vous guider à travers les étapes de création d'un menu simplifié sans les modifications d'arrière-plan, en se concentrant sur la résolution des problèmes liés à l'activation des classes lors du défilement ou du clic.

Personnalisation CSS :

Le code HTML fourni semble être standard et les révisions CSS apportées sont les suivantes :

.menu {
  list-style:none;
}
.menu > li {
  float: left;
}
.menu > li > a {
  color: #555;
  float: none;
  padding: 10px 16px 11px;
  display: block;
}
.menu > li > a:hover {
  color: #F95700;
}
.menu a[aria-current="page"],
.menu a[aria-current="page"]:hover {
  color:#F95700;
}

Pour implémenter la fonctionnalité de changement de classe actif, JavaScript est requis. La réponse fournie exploite jQuery pour obtenir l'effet souhaité :

$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});

Ce code garantit qu'en cliquant sur un élément de menu, toutes les classes actives sont supprimées et l'élément actuel obtient le statut actif. Cela correspond au comportement observé dans le sous-nav de Bootstrap.

Pour implémenter cette fonctionnalité, assurez-vous de relier correctement les fichiers jQuery, bootstrap.js et bootstrap.css.

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!