使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文件了。