WWWTech

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.