Question

こんにちは私はブートストラップに関して複雑なことがあります。私のコードがうまくいかないのですか？問題を解決するための任意のアイデア？ - ありがとう

<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

ulタグにliタグを追加するのを忘れました。

<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

最初の事はあなたがそれらにin activeクラスを使用して、タブのコンテンツペインのの両方を持っており、これらのクラスを持っている必要があり一つだけがアクティブオープンペインであるということです。これらの両方をin activeクラスで使用すると、両方のタブが同時に表示されます。

次に、タブは、ナビゲーションタブのhrefのハッシュタグによってアクティブ化されます。ハッシュタグはありません。開くタブペインに対応する必要があります。したがって、navタブのhrefにID #roomのタブを開く場合は、これを指定する必要があります。また、あなたはとても好きなようにもHREFでdata-toggle="tab"を置く必要があります。

：

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

これは#room

は、だからあなたのマークアップは、カスタムPHPずに、次のようになるはずですIDでタブを開きます。

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