Best way to make twitter bootstrap tabs persistent

Question

What is the best way of making these tabs persist?

http://twitter.github.com/bootstrap/javascript.html#tabs

To add some context, this is for a rails application. I'm passing an array [tab1, tab2] to my view, rendering both tabs and using the bootstrap tab plugin to toggle their visibility.

Answer 1

I wanted to improve the best answer here..

Credit goes to Sucrenoir, but if you want to avoid jumping on the page when you change tabs, use this improved code:

$(document).ready(function() {
    // show active tab on reload
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');

    // remember the hash in the URL without jumping
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
       if(history.pushState) {
            history.pushState(null, null, '#'+$(e.target).attr('href').substr(1));
       } else {
            location.hash = '#'+$(e.target).attr('href').substr(1);
       }
    });
});

Answer 2

Another modified version if you don't want tab clicks to be added to the history, but also don't want the page jumping up and down:

$(document).ready(function () {

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

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

});

Answer 3

Execute the following code after DOM load:

$('a[data-toggle=tab]').on('click', function () {
    history.pushState(null, null, $(this).attr('href'));
});


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

However, this leads to poor UI experience, since currently active tab will shown first, and then it will be switched to a tab from location.hash

Answer 4

Tested for Bootstrap 4, minimalist (2 lines) code without history push, that works on any page with nav-tabs.

<script type="text/javascript">
$(document).ready(function(){
    // store the currently selected tab in the hash value
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { location.replace($(e.target).attr("href")); });
    // switch to the currently selected tab when loading the page
    $('.nav-tabs a[href="' + window.location.hash + '"]').tab('show');
});
</script>

Answer 5

You can get the URL fragment (that's the part of the URL after #) on load using window.location.hash, and specifically set that tab as visible:

if (window.location.hash) {
    $(window.location.hash).tab('show')
}

Answer 6

I wanted to improve the best two answers here.. :)

Credit goes to Sucrenoir and d-wade.

Because in code is used history API you can't use onchangehash (https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange). This code add the functionality of back button (https://developer.mozilla.org/cs/docs/Web/API/WindowEventHandlers/onpopstate).

// show active tab on reload
if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
// remember the hash in the URL without jumping
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    if(history.pushState) {
        history.pushState(null, null, '#'+$(e.target).attr('href').substr(1));
    } else {
        location.hash = '#'+$(e.target).attr('href').substr(1);
    }
});
// remember to back button
window.onpopstate = function(e) {
    $('a[href="' + location.hash + '"]').tab('show');
};