Search
Learn
Share

Make Bootstrap tabs to be persistent

By default, bootstrap tabs prevent the hash being added to the url, and doesn't show the correct tab if a hash exists when the page loads.

To use the following code, you will need to include jQuery first.

To show the correct tab when the page loads, use:

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

To append the hash to the url when a tab is changed, use:

$("a[data-toggle='tab']").on("shown.bs.tab", function (e) {
var hash = $(e.target).attr("href");
if (hash.substr(0, 1) == "#") {
location.replace("#" + hash.substr(1));
}
});