Twitter Bootstrap - Tabs - URL doesn't change

Question

I\'m using Twitter Bootstrap and its \"tabs\".

I have the following code:

Answer 1

There are three components necessary for a complete solution:

1. Show the correct tab when the page is loaded if there is a hash in the URL.
2. Changing the hash in the URL when the tab is changed.
3. Change the tab when the hash changes in the URL (back / forward buttons), and make sure the first tab is cycled correctly.

I don't think any of the comments here, nor the accepted answer, handle all of these scenarios.

As there's quite a bit involved, I think it's neatest as a small jQuery plugin: https://github.com/aidanlister/jquery-stickytabs

You can call the plugin like so:

$('.nav-tabs').stickyTabs();

I've made a blog post for this, http://aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/