Make Twitter Bootstrap navbar work like tabs

Make Twitter Bootstrap navbar work like tabs

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):


Solution 1:

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:  Two rows in a navbar with a column spanning two rows