public
Created

After way too much work, I was able to get history behavior (back button) for bootstrap 3 tabs

  • Download Gist
gistfile1.txt
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
$(document).ready(function(){
// bootsrtap tab control setup
$('.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
// Manage HISTORY (back button behavior) for tabs
// add a hash to the URL when the user clicks on a tab
// relies on https://github.com/devote/HTML5-History-API/ to support pushState()
$('a[data-toggle="tab"]').on('click', function(e) {
console.log($(this).attr('href'));
history.pushState(null, null, $(this).attr('href'));
});
// // navigate to a tab when the history changes
showTabFromUrl = function(e) {
if (location.hash.substr(0,3)=="#/#") {
hashToUse = location.hash.substr(2);
} else {
hashToUse = location.hash;
}
var activeTab = $('[href=' + hashToUse + ']');
if (activeTab.length) {
activeTab.tab('show');
} else {
$('.nav-tabs a:first').tab('show');
}
}
// cross-browser call to bind showTab
if (!window.addEventListener) {
window.attachEvent("popstate", showTabFromUrl);
} else {
window.addEventListener("popstate", showTabFromUrl, false);
}
 
});// doc ready

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.