Comment rendre les liens de navigation actifs à l'aide de Bootstrap : un guide étape par étape

Activation des liens de navigation dans Bootstrap

Lors de la réplication de la fonctionnalité de navigation active vue sur le site Web Bootstrap, les utilisateurs peuvent rencontrer des difficultés pour activer les éléments de menu. Pour résoudre ce problème, assurez-vous que les CSS et JavaScript nécessaires sont correctement implémentés.

HTML

La structure HTML doit inclure une liste non ordonnée (

) avec des éléments de liste (
• ), chacun contenant une balise d'ancrage (). La balise d'ancrage définit le lien de navigation et peut éventuellement inclure un attribut aria-current="page" pour l'élément actif actuel.

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

  CSS

  Le CSS définit les styles pour le menu de navigation. Assurez-vous que la classe active est correctement appliquée à l'élément actif actuel.

  <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 activer les liens de navigation et basculer la classe active, implémentez jQuery gestionnaires d'événements :

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

  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!