Persisting the tab state in Bootstrap
Bootstrap tabs are great, but not having the tab persisted between page navigations can be a little frustrating for end users.
There’s a few things that need to be done in a complete solution:
- Show the correct tab when the page is loaded if there is a hash in the URL.
- Change the hash in the URL when the tab is changed.
- Change the tab when the hash changes in the URL (back / forward buttons), and make sure the first tab is cycled correctly.
This was a bit much for a one liner, so I’ve made a simple jQuery plugin:
You can call the plugin like so:
You can also find jquery.stickytabs.js on GitHub or install via bower with
bower install jquery-stickytabs.