Comment maintenir l'état de navigation actif dans Bootstrap CSS sans couleurs d'arrière-plan par défaut ?

Bootstrap CSS : maintenir une navigation active

Bootstrap fournit un système de navigation qui permet aux utilisateurs de naviguer facilement dans les différentes sections d'un site Web. Cependant, il est parfois souhaité de personnaliser le menu sans les couleurs d'arrière-plan par défaut. Dans de tels cas, il peut être nécessaire d'implémenter une logique supplémentaire pour maintenir l'état de navigation actif lors du défilement ou du clic sur les éléments de menu.

Considérez le scénario suivant : un menu personnalisé a été créé à l'aide de HTML et CSS, similaire à le menu subnav sur le site Web Bootstrap. Cependant, la classe active ne change pas lorsque vous faites défiler vers le bas ou cliquez sur les éléments de menu.

HTML :

<code class="html"><ul class="menu">
    <li><a href="#" aria-current="page">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#contact">Contact</a></li>
</ul></code>

CSS :

<code class="css">.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;
}</code>

Pour résoudre ce problème, du JavaScript supplémentaire est requis. Le code jQuery suivant efface la classe active de tous les éléments de menu avant de l'ajouter à l'élément actuel :

JavaScript :

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

En incorporant ce code, l'actif la classe changera désormais correctement lors de la navigation dans le menu. Cette solution permet de créer un système de navigation personnalisé qui conserve le comportement visuel souhaité.

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!