Handle back button issues with Twitter Bootstrap's tab component.

gistfile1.js

// Handle back button issues with Twitter Bootstrap's tab component.
// Based on: http://stackoverflow.com/a/10120221/81769
// It has been changed to avoid the following side effects:
// - Switching tabs was being added to navigation history which is undesirable
//   (Worked around this by using location.replace instead of setting the hash property)
// - Browser scroll position was lost due to fragment navigation
//   (Worked around this by converting #id values to #!id values before navigating.)
$(document).ready(function () {

    if (location.hash.substr(0,2) == "#!") {
        $("a[href='#" + location.hash.substr(2) + "']").tab("show");
    }

    $("a[data-toggle='tab']").on("shown", function (e) {
        var hash = $(e.target).attr("href");
        if (hash.substr(0,1) == "#") {
            location.replace("#!" + hash.substr(1));
        }
    });

});

I couldn't get this working with Bootstrap 3, but by changing "shown" to "shown.bs.tab" on line 14 it works perfectly.

Thank you, thank you, thank you!!

Works like a charm. Thanks josheinstein and poddys.

Thank you, thank you, thank you!!

This is awesome! Thanks, @josheinstein -- and @poddys for the Bootstrap 3.x fix.

New fork now puts together this work and François Zaninotto's