Bootstrap藥片/標籤和下拉菜單。一個不幸的婚姻？

Question

因此Bootstrap文檔描述了帶有下拉和藥片的藥片作爲標籤欄，但是兩者可以結合使用嗎？理想情況下，我希望有一個藥丸式的導航欄，下降到特定的項目。當選擇該項目時，標籤內容應該改變並且節丸會變爲活動狀態。但是，到目前爲止我所做的嘗試中，標籤內容不會更改，並且它是突出顯示（並且不會關閉）的特定菜單項。要麼我得到了可怕的錯誤標記，要麼我試圖將Bootstrap的兩個部分組合在一起。

的jsfiddle這裏：http://jsfiddle.net/63kLm/

<div class="well"> 
<!-- Nav tabs --> 
<ul class="nav nav-pills"> 
    <li class=""> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 1 <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li> 
       <a href="#tab1" data-toggle="pill">Item 1</a> 
      </li> 
      <li> 
       <a href="#tab2" data-toggle="pill">Item 2</a> 
      </li> 
      <li> 
       <a href="#tab3" data-toggle="pill">Item 3</a> 
      </li> 
      <li> 
       <a href="#tab4" data-toggle="pill">Item 4</a> 
      </li> 
      <li> 
       <a href="#tab5" data-toggle="pill">Item 5</a> 
      </li> 
     </ul> 
    </li> 
    <li class=""> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 2 <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li> 
       <a href="#tab6" data-toggle="pill">Item 6</a> 
      </li> 
      <li> 
       <a href="#tab7" data-toggle="pill">Item 7</a> 
      </li> 
      <li> 
       <a href="#tab8" data-toggle="pill">Item 8</a> 
      </li> 
     </ul> 
    </li> 
    <li class=""> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 3 <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li> 
       <a href="#tab9" data-toggle="pill">Item 9</a> 
      </li> 
      <li> 
       <a href="#tab10" data-toggle="pill">Item 10</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

<!-- Tab panes --> 
<div class="tab-content"> 
    <div class="tab-pane active" id="#tab1"> 
     <h3>Default Item 1</h3> 
    </div> 
    <div class="tab-pane" id="#tab2"> 
     <h3>Item 2</h3> 
    </div> 
    <div class="tab-pane" id="#tab3"> 
     <h3>Item 3</h3> 
    </div> 
    <div class="tab-pane" id="#tab4"> 
     <h3>Item 4</h3> 
    </div> 
    <div class="tab-pane" id="#tab5"> 
     <h3>Item 5</h3> 
    </div> 
    <div class="tab-pane" id="#tab6"> 
     <h3>Item 6</h3> 
    </div> 
    <div class="tab-pane" id="#tab7"> 
     <h3>Item 7</h3> 
    </div> 
    <div class="tab-pane" id="#tab8"> 
     <h3>Item 8</h3> 
    </div> 
    <div class="tab-pane" id="#tab9"> 
     <h3>Item 9</h3> 
    </div> 
    <div class="tab-pane" id="#tab10"> 
     <h3>Item 10</h3> 
    </div> 
</div> 
</div> 

Answer 1

我已經更新了我的答案與完全工作守則，其中包括入侵檢測系統，從而使活性類功能正常。
這裏是一個Bootply http://www.bootply.com/114915 另外，Bootstrap文檔有一個有用的例子，我第一次錯過了這個。 http://getbootstrap.com/javascript/#tabs

<div class="well"> 
<!-- Nav tabs --> 
<ul id="myTab" class="nav nav-pills"> 
    <li class="dropdown"> 
     <a id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" href="#">Section 1 <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li> 
       <a href="#tab1" data-toggle="pill">Item 1</a> 
      </li> 
      <li> 
       <a href="#tab2" data-toggle="pill">Item 2</a> 
      </li> 
      <li> 
       <a href="#tab3" data-toggle="pill">Item 3</a> 
      </li> 
      <li> 
       <a href="#tab4" data-toggle="pill">Item 4</a> 
      </li> 
      <li> 
       <a href="#tab5" data-toggle="pill">Item 5</a> 
      </li> 
     </ul> 
    </li> 
    <li class="dropdown"> 
     <a id="myTabDrop2" class="dropdown-toggle" data-toggle="dropdown" href="#">Section 2 <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li> 
       <a href="#tab6" data-toggle="pill">Item 6</a> 
      </li> 
      <li> 
       <a href="#tab7" data-toggle="pill">Item 7</a> 
      </li> 
      <li> 
       <a href="#tab8" data-toggle="pill">Item 8</a> 
      </li> 
     </ul> 
    </li> 
    <li class="dropdown"> 
     <a id="myTabDrop3" class="dropdown-toggle" data-toggle="dropdown" href="#">Section 3 <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li> 
       <a href="#tab9" data-toggle="pill">Item 9</a> 
      </li> 
      <li> 
       <a href="#tab10" data-toggle="pill">Item 10</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

<!-- Tab panes --> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
     <h3>Default Item 1</h3> 
    </div> 
    <div class="tab-pane" id="tab2"> 
     <h3>Item 2</h3> 
    </div> 
    <div class="tab-pane" id="tab3"> 
     <h3>Item 3</h3> 
    </div> 
    <div class="tab-pane" id="tab4"> 
     <h3>Item 4</h3> 
    </div> 
    <div class="tab-pane" id="tab5"> 
     <h3>Item 5</h3> 
    </div> 
    <div class="tab-pane" id="tab6"> 
     <h3>Item 6</h3> 
    </div> 
    <div class="tab-pane" id="tab7"> 
     <h3>Item 7</h3> 
    </div> 
    <div class="tab-pane" id="tab8"> 
     <h3>Item 8</h3> 
    </div> 
    <div class="tab-pane" id="tab9"> 
     <h3>Item 9</h3> 
    </div> 
    <div class="tab-pane" id="tab10"> 
     <h3>Item 10</h3> 
    </div> 
</div> 
</div>