如何在Bootstrap中設置多個選項卡導航

Question

我想實現一個數據列表，其中每個項目都有一個選項卡（其實是）菜單。 問題是，當我這樣做時，他們互相干擾，使得一次只能有1個活動選項卡，即使它們具有不同的ID也是如此。

下面是我這樣做：

首先我必須標籤/丸菜單中的一個在列表中的項目之一：

<div class='col-md-12'> 
    <div class='row'> 
     <div class='col-md-12' style='margin-top: -50px;'> 
      <ul class='nav nav-pills'> 
       <li class='active'><a data-toggle='tab' href='#vis_opgave1'>Vis opgave</a></li> 
       <li><a data-toggle='tab' href='#rediger_opgave1'>Rediger Tekst</a></li> 
       <li><a data-toggle='tab' href='#admin_opgave_billeder1'>Administrer billeder</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

這裏是內容的div持有關聯DATAS：

<div id='vis_opgave1' class='tab-pane fade in active'> 
    <div class='row'> 
     aaaaaaaa11111111111 
    </div> 
</div> 

<div id='rediger_opgave1' class='tab-pane fade'> 
    <div class='row'> 
     bbbbbbb11111111 
    </div> 
</div> 

<div id='admin_opgave_billeder1' class='tab-pane fade'> 
    <div class='row'> 
     cccccccccc1111111 
    </div> 
</div> 

我創建了一個的jsfiddle向您展示問題：http://jsfiddle.net/kx96pndg/

當選中其中一個選項卡時，可以看到其他導航菜單的活動內容消失。

我真的很希望有人能幫助我。任何幫助將不勝感激。

Answer 1

您在選項卡窗格周圍缺少<div class="tab-content"></div>。看例子。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <p>&nbsp;</p> 
 
    <p>&nbsp;</p> 
 
    <div class='col-md-12'> 
 
    <div class='row'> 
 
     <div class='col-md-12' style='margin-top: -50px;'> 
 
     <ul class='nav nav-pills'> 
 
      <li class='active'><a data-toggle='tab' href='#vis_opgave1'>Vis opgave</a> 
 

 
      </li> 
 
      <li><a data-toggle='tab' href='#rediger_opgave1'>Rediger Tekst</a> 
 

 
      </li> 
 
      <li><a data-toggle='tab' href='#admin_opgave_billeder1'>Administrer billeder</a> 
 

 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="tab-content"> 
 
    <div id='vis_opgave1' class='tab-pane fade in active'> 
 
     <div class='row'>aaaaaaaa11111111111</div> 
 
    </div> 
 
    <div id='rediger_opgave1' class='tab-pane fade'> 
 
     <div class='row'>bbbbbbb11111111</div> 
 
    </div> 
 
    <div id='admin_opgave_billeder1' class='tab-pane fade'> 
 
     <div class='row'>cccccccccc1111111</div> 
 
    </div> 
 
    </div> 
 
    <p>&nbsp;</p> 
 
    <p>&nbsp;</p> 
 
    <div class='col-md-12'> 
 
    <div class='row'> 
 
     <div class='col-md-12' style='margin-top: -50px;'> 
 
     <ul class='nav nav-pills'> 
 
      <li class='active'><a data-toggle='tab' href='#vis_opgave2'>Vis opgave</a> 
 

 
      </li> 
 
      <li><a data-toggle='tab' href='#rediger_opgave2'>Rediger Tekst</a> 
 

 
      </li> 
 
      <li><a data-toggle='tab' href='#admin_opgave_billeder2'>Administrer billeder</a> 
 

 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="tab-content"> 
 
    <div id='vis_opgave2' class='tab-pane fade in active'> 
 
     <div class='row'>aaaaaaaa22222222</div> 
 
    </div> 
 
    <div id='rediger_opgave2' class='tab-pane fade'> 
 
     <div class='row'>bbbbbbb222222222</div> 
 
    </div> 
 
    <div id='admin_opgave_billeder2' class='tab-pane fade'> 
 
     <div class='row'>cccccccccc2222222</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

我想你可以使用這個插件。 bootstrap-multitabs