Question

I’m using Twitter bootstrap’s tabs plugin and it requires the link that activates to tab to contain the URL fragment beginning with a # followed by the id of the div containing the tab’s HTML content.

 <a href="#home" data-toggle="tab">Home</a>
 <div class="tab-pane" id="home">...</div>

Is there any way to get rid of having to use the #? Also, I tried removing the # in link and clicking on the link somehow does not make the browser follow the link!

I am using backbone.js and pushstates, so I’m looking to have the link not containing the #, and clicking on it should update the web address to mydomain.com/home instead of mydomain.com/#home.

 <a href="home" data-toggle="tab">Home</a>
 <div class="tab-pane" id="home">...</div>

And…

$(function() {
    $('a[data-toggle="tab"]').on('shown', function(e) {
        // Update URL in address bar to trigger Backbone.js's router
        window.location.hash = e.target.hash;
    });
});

Can this be done? Or am I better off using backbone.js to write my own tabs functionality?

Answer 1

I can see that there are different types of tabs, if you follow the Basic tabs example rather than the Tabbable example does this not work?

http://twitter.github.com/bootstrap/components.html#navs

I think the main problem here is that the Tabbable example uses a jQuery plugin which probably conflicts with backbone.js binding.