Make Twitter Bootstrap navbar work like tabs
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.
Related videos on Youtube
Comments
-
Scott Hunter about 1 year
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"> ...
-
Scott Hunter over 11 yearsIt was, but after adding the nav-tabs.button thingy, it no longer is. I posted a code sample.
-
Scott Hunter over 11 yearsYou were absolutely correct -- and once I included the bootstrap file that the nav-tabs thingy needed, all was well. Thanks!
-
Karl P almost 7 yearsThis was most helpful, but any with a normal ul navbar, and also a navbar-right, I end up with "active" items in both sections.