让Twitter Bootstrap导航栏像标签一样工作
让Twitter Bootstrap导航栏像标签一样工作
提问于 2012-08-02 04:39:18
有没有办法让导航栏(看起来像是链接到其他页面)表现得像一组导航选项卡(它们停留在同一页上，隐藏除所需部分之外的所有部分)？
实际上，我的导航栏就像我想要的那样工作，但前提是我不调用$(".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">
...回答 1
Stack Overflow用户
回答已采纳
发布于 2012-08-02 04:44:13
我没有看到任何明显的问题，布线你的导航链接作为标签。
您只需省略选项卡类以避免覆盖您的导航栏样式，并且不要忘记data-属性(如果需要)。
然后，您必须使用docs中指定的JavaScript激活(或使用data-toggle="tab"属性)。
一切都应该能正常工作。
css编辑：对于后人来说，你确实需要包含一个bootstrap-tab.js或bootstrap.js (或缩小版本)和相关的css文件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11767214
复制相关文章
相似问题