Skip to content

Instantly share code, notes, and snippets.

@bengm
Created November 18, 2013 21:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bengm/7535223 to your computer and use it in GitHub Desktop.
Save bengm/7535223 to your computer and use it in GitHub Desktop.
After way too much work, I was able to get history behavior (back button) for bootstrap 3 tabs
$(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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment