Create a gist now

Instantly share code, notes, and snippets.

Handle back button issues with Twitter Bootstrap's tab component.
// 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));
}
});
});
@poddys

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

@MarcPinnell

Thank you, thank you, thank you!!

@schmave

Works like a charm. Thanks josheinstein and poddys.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment