John Main Logo

John Main

Code. Design. Hosting. Maintenance.

13
Nov '16

Easy one this, just copy and paste code if you’re using Bootstrap.
Whenever a tab is changed, this code will take its ID from the trigger and put into the window location hash (AKA address anchor or, if you’re really posh, the fragment identifier).

//Remember tab state
$('ul.nav-tabs > li > a').on('shown.bs.tab', function(e) {
if($(e.target).attr('href')) {
var id = $(e.target).attr('href').substr(1);
window.location.hash = id;
}
});

The second section of code ensures that whenever the page is reloaded, or the page is linked to using a valid tab ID, the identified tab will be selected automatically.

//Switch tab state
if (window.location.hash) {
$("a[href='" + window.location.hash + "']").tab('show');
}

Done