使Twitter的Bootstrap導航欄工作像標籤

Question

有沒有辦法讓一個導航欄（它似乎被設計爲鏈接到其他頁面）行爲像一組導航選項卡（它保持在同一頁面上，隱藏除了所需的所有部分）？

實際上，我的導航欄的工作方式與我想要的一樣，但前提是我不打電話$(".nav-tabs").button()，這是我需要的其他功能。現在沒有發生摺疊/鬆開的情況。

下面的代碼（這是非常鍋爐板）：

<div class="navbar navbar-fixed-top"> 
<div class="navbar-inner"> 
    <div class="container"> 
    <div class="nav-collapse collapse"> 
    <ul id="tab" class="nav"> 
    <li class="active"><a href="#Tab1" data-toggle="tab">Tab1</a></li> 
    <li><a href="#Tab2" data-toggle="tab">Tab2</a></li> 
    <li><a href="#Tab3" data-toggle="tab">Tab3</a></li> 
    </ul> 
    <a class="brand" href="#">NavTab Demo</a> 
    </div> 
    </div> 
</div> 
</div> 
<div class="container-fluid"> 
<div class="row-fluid"> 
    <div class="span12"> 
    <div class="tab-content"> 
    <div class="tab-pane active" id="Tab1"> 
... 

Answer 1

我沒有看到你的接線導航鏈接的選項卡的任何明顯的問題。

您只需要省略選項卡類不要覆蓋您的導航欄樣式，並且不要忘記data-屬性（如果需要）。

然後，您必須使用docs中指定的JavaScript激活（或使用data-toggle="tab"屬性）。

一切都應該工作。

編輯：爲子孫後代，你需要包括bootstrap-tab.js或bootstrap.js ONE（或縮小的版本）和相關的CSS文件了。