Bootstrap nav-tabs et lien actif

Question

Je suis confronté à un problème avec la barre de navigation bootstrap4 et les onglets actifs. L'onglet et le contenu ne sont pas actifs en cliquant dessus mais quand je les invoque individuellement en plaçant la classe active à chaque onglet qu'ils travaillent.

<div class="row"> 
 
    <div class= "col"> 
 
     <h2>Super world Leadership</h2> 
 
     <ul class="nav nav-tabs"> 
 
      <li class="nav-item"> 
 
       <a class="nav-link active" href="#ironman" 
 
       role="tab" data-toggle="tab">iron man, CEO</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#spiderman" role="tab" 
 
       data-toggle="tab">spiderman, CFO</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#batman"role="tab" 
 
       data-toggle="tab">batman, CTO</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#hulk" role="tab" 
 
       data-toggle="tab">hulk, Exec. Chef</a> 
 
      </li> 
 
     </ul> 
 

 
     <div class="tab-content"> 
 
      
 
      <div role="tabpanel" class="tab-pane fade show active" id="ironman"> 
 
       <h3>iron man <small>Chief Epicurious Officer</small></h3> 
 
       <p class="hidden-xs-down">Our CEO, ironman</p> 
 
      </div> 
 
      
 
      <div role="tabpanel" class="tab-pane fade" id="spiderman"> 
 
       <h3>spiderman <small>Chief Food Officer</small></h3> 
 
       <p class="hidden-xs-down">Our CFO, spiderman, </p> 
 
      </div> 
 
      
 
      <div role="tabpanel" class="tab-pane fade" id="batman"> 
 
       <h3>batman <small>Chief Taste Officer</small></h3> 
 
       <p class="hidden-xs-down">CTO </p> 
 
      </div> 
 
      
 
      <div role="tabpanel" class="tab-pane fade" id="hulk"> 
 
       <h3>hulk<small>Executive Chef</small></h3> 
 
       <p class="hidden-xs-down">Award winning </p> 
 
      </div> 
 
     
 
     </div> 
 
    
 
    </div> 
 
</div>

peut quelqu'un guide ici.

Answer 1

Il vous manque la pièce pour déclencher la sélection de l'onglet. Vous allez devoir javascript ou utiliser l'attribut data-toggle.

Jetez un oeil ici pour quelques détails:

https://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior