Twitter Bootstrap: how to fix tabs

Christian Kruse,

I use Twitter's Bootstrap in my day to day work, and I'm pretty satisfied with it. It works, solves loads of problems and brings a rich set of UI elements.

But one thing annoys me every time I have to use it: tabs. They simply do not work with the browser history, you cannot go back to a page and have the old tab open or go back to a tab. I think this is a huge usability issue. Gladly, it can be fixed with a few lines of JavaScript:

$(document).ready(function() {
  /* Automagically jump on good tab based on anchor; for page reloads or links */
  if(location.hash) {
    $('a[href=' + location.hash + ']').tab('show');
  }

  /* Update hash based on tab, basically restores browser default behavior to
     fix bootstrap tabs */
  $(document.body).on("click", "a[data-toggle]", function(event) {
    location.hash = this.getAttribute("href");
  });
});

/* on history back activate the tab of the location hash
   if exists or the default tab if no hash exists */
$(window).on('popstate', function() {
  var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
  $('a[href=' + anchor + ']').tab('show');
});

Basically, every time you open a tab it sets the document hash to the tab hash and so generates a new history entry – we restore the browser default behavior. To achieve history back behavior in tabs, we use the history API: on a popstate event we activate the tab of the anchor or the default tab if no hash is set.

Works pretty well for me.