Comment obtenir une navigation active dans les menus Bootstrap avec CSS et JavaScript personnalisés ?

Réaliser une navigation active avec Bootstrap CSS

Créer des menus de navigation personnalisés dans Bootstrap tout en conservant la fonctionnalité de classe active peut être un défi. Cet article aborde la question de savoir pourquoi la classe active ne change pas lors du défilement ou du clic sur les éléments de menu.

Structure HTML

Le HTML fourni comprend essentiellement une liste d'éléments avec les ancres correspondantes :

<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 personnalisé

Les styles CSS du menu définissent des propriétés de base telles que le style de liste, le flotteur et le remplissage. De plus, les états de survol et les états actifs sont spécifiés :

<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>

JavaScript pour l'état actif

Pour changer correctement de classe active, JavaScript est requis. L'extrait suivant gère les clics sur les éléments de menu et garantit qu'un seul élément est actif à la fois :

<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>

Considérations supplémentaires

Dans ce cas spécifique, le Bootstrap la navigation, représentée par .navbar dans le JavaScript, est ciblée. Cependant, il est toujours important de prendre en compte les spécificités de votre implémentation lors de l'adaptation de cette solution.

En utilisant le code HTML, CSS et JavaScript fourni, vous pouvez obtenir un menu de navigation personnalisé avec la fonctionnalité de classe active souhaitée.

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!