Geek Answers Handbook

Twitter Bootstrap Tabbed Backbone.js - remove # in links

I use the tabstrap plugin for Twitter downloads and it requires a link that activates the tab to contain a fragment of the URL starting with # , followed by the id div containing the contents of the HTML tab.

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

Is there a way to get rid of the need to use # ? In addition, I tried to remove the link # in the link and, clicking the link, somehow does not force the browser to follow the link!

I use backbone.js and pushstates, so I am looking for a link that does not contain # , 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>

A...

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

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

+4
source share
2 answers

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

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

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

+1
source

just set the data-url attribute to

and do something like:

 events: 'show .nav-tabs a': 'navigateTab' navigateTab: (e) -> target = $(e.currentTarget) @router.navigate(target.data('url'), trigger: false)
+3
source

More articles:


All Articles