// 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)); | |
} | |
}); | |
}); |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
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. |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
MarcPinnell
commented
Oct 17, 2014
Thank you, thank you, thank you!! |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
schmave
commented
Jun 24, 2015
Works like a charm. Thanks josheinstein and poddys. |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
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
I couldn't get this working with Bootstrap 3, but by changing "shown" to "shown.bs.tab" on line 14 it works perfectly.