使 Twitter Bootstrap 导航栏像标签一样工作 [英] Make Twitter Bootstrap navbar work like tabs
问题描述
有没有办法让导航栏(似乎旨在链接到其他页面)表现得像一组导航选项卡(保持在同一页面上,隐藏除所需部分之外的所有部分)?
实际上,我的导航栏可以按照我的意愿工作,但前提是我不调用 $(".nav-tabs").button()
,我需要它来做其他事情.现在没有发生折叠/展开.
这是代码(这是非常样板):
<div class="container-fluid"><div class="row-fluid"><div class="span12"><div class="tab-content"><div class="tab-pane active" id="Tab1">...
在将导航链接连接为选项卡时,我没有看到任何明显的问题.
您只需要省略选项卡类,不要覆盖导航栏样式,并且不要忘记 data-
属性(如果需要).
然后您必须使用 docs (或使用 data-toggle="tab"
属性).
一切正常.
Edit :为了后代,您确实需要包含 bootstrap-tab.js
或 bootstrap.js
(或缩小版本)之一) 和相关的 css 文件.
Is there a way to make a navbar (which appears to be designed to link to other pages) behave like a set of nav tabs (which stay on the same page, hiding all but the desired section)?
Actually, my navbar works just as I want, but only if I don't call $(".nav-tabs").button()
, which I need for other things. Now none of the collapsing/uncollapsing happens.
Here's the code (which is pretty boiler-plate):
<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">
...
I don't see any obvious problem in wiring your nav links as tabs.
You just need to ommit tab classes not to override your navbar styles, and don't forget the data-
attributes (if needed).
Then you have to use the JavaScript activation as specified in the docs (or use the data-toggle="tab"
attribute).
Everything should be working.
Edit : for posterity, you do need to include ONE of bootstrap-tab.js
or bootstrap.js
(or the minified version) and the associated css files too.
这篇关于使 Twitter Bootstrap 导航栏像标签一样工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!