Les onglets de navigation HTML ne fonctionnent pas

Question

Salut J'ai des complication concernant le bootstrap. Mon code ne fonctionne pas est-il quelque chose de mal? une idée pour résoudre le problème? - merci

<nav id='nav-reservation'> 
    <div class="container"> 
     <ul class="nav nav-tabs"> 
      <a href='resource-index.php?page=room' class='nav-reservation-item <?php if($_REQUEST[' page '] == "room"){ echo "active"; } ?>'>Room</a> 
      <a href='resource-index.php?page=equipment' class='nav-reservation-item <?php if($_REQUEST[' page '] == "equipment"){ echo "active"; } ?>'>Equipment </a> 
      </ul> 
    </div> 

    <div class="tab-content"> 
     <div id="room" class="tab-pane fade in active"></div> 
     <div id="equipment" class="tab-pane fade in active"></div> 
    </div> 
</nav> 

Answer 1

Vous avez oublié d'ajouter li tag dans ul tag.

<nav id='nav-reservation'> 
<div class="container"> 
    <ul class="nav nav-tabs"> 
     <li> <a href='resource-index.php?page=room' class='nav-reservation-item <?php if($_REQUEST[' page '] == "room"){ echo "active"; } ?>'>Room</a></li> 
    <li> <a href='resource-index.php?page=equipment' class='nav-reservation-item <?php if($_REQUEST[' page '] == "equipment"){ echo "active"; } ?>'>Equipment </a></li> 
     </ul> 
</div> 

<div class="tab-content"> 
    <div id="room" class="tab-pane fade in active"></div> 
    <div id="equipment" class="tab-pane fade in active"></div> 
</div> 

Answer 2

La première chose est que vous avez à la fois de votre volet de contenu de l'onglet de les in active cours sur eux et la seule qui devrait avoir ces classes est le volet actif ouvert. Avoir les deux avec les classes in active montrera les deux onglets en même temps.

Ensuite les onglets sont activés par un hashtag dans le href des onglets de nav. Et vous n'avez pas de hashtag. Ils doivent correspondre au volet que vous souhaitez ouvrir. Donc, si vous voulez ouvrir l'onglet avec l'ID #room dans le href dans les onglets nav vous devez le spécifier. Aussi, vous devez mettre le data-toggle="tab" dans le href aussi bien comme ceci:

<a data-toggle="tab" href="#room">Room</a> 

Cela ouvrira l'onglet avec l'id #room

Donc, votre balisage devrait ressembler à quelque chose comme ce qui suit sans votre php personnalisé:

<ul class="nav nav-tabs"> 
     <li class="active"><a data-toggle="tab" href="#room">Room</a></li> 
     <li><a data-toggle="tab" href="#equipment">Equipment</a></li> 
    </ul> 

    <div class="tab-content"> 
     <div id="room" class="tab-pane fade in active"> 
     First Tab 
     </div> 
     <div id="equipment" class="tab-pane fade"> 
     Second Tab 
     </div> 
    </div>