Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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

This comment has been minimized.

Show comment Hide comment
@poddys

poddys May 16, 2014

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

poddys commented May 16, 2014

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

@MarcPinnell

This comment has been minimized.

Show comment Hide comment
@MarcPinnell

MarcPinnell Oct 17, 2014

Thank you, thank you, thank you!!

Thank you, thank you, thank you!!

@schmave

This comment has been minimized.

Show comment Hide comment
@schmave

schmave Jun 24, 2015

Works like a charm. Thanks josheinstein and poddys.

schmave commented Jun 24, 2015

Works like a charm. Thanks josheinstein and poddys.

@mint-ws

This comment has been minimized.

Show comment Hide comment
@mint-ws

mint-ws Jan 4, 2017

Thank you, thank you, thank you!!

mint-ws commented Jan 4, 2017

Thank you, thank you, thank you!!

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