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:

  1. Show the correct tab when the page is loaded if there is a hash in the URL.
  2. Change 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.

This was a bit much for a one liner, so I’ve made a simple jQuery plugin:

/**
 * jQuery Plugin: Sticky Tabs
 *
 * @author Aidan Lister <aidan@php.net>
 * @version 1.0.0
 */
(function ( $ ) {
    $.fn.stickyTabs = function() {
        context = this

        // Show the tab corresponding with the hash in the URL, or the first tab.
        var showTabFromHash = function() {
          var hash = window.location.hash;
          var selector = hash ? 'a[href="' + hash + '"]' : 'li.active > a';
          $(selector, context).tab('show');
        }

        // Set the correct tab when the page loads
        showTabFromHash(context)

        // Set the correct tab when a user uses their back/forward button
        window.addEventListener('hashchange', showTabFromHash, false);

        // Change the URL when tabs are clicked
        $('a', context).on('click', function(e) {
          history.pushState(null, null, this.href);
        });

        return this;
    };
}( jQuery ));

You can call the plugin like so:

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

You can also find jquery.sticktabs.js on github.