Bootstrap: prevent jump to content when clicking tabs

Recently I had to add tabs to a website and ran into not wanting the browser to jump to the panel content when tabs are clicked. I just want the content to switch.

After a little research, I found posts explaining how to obtain the opposite, and a little later found this:

http://blog.shaunscovil.com/post/55630727782/twitter-bootstrap-how-to-prevent-jump-when-tabs-are-clic

 

After giving their suggestion a try, I noticed that the path part of the URL was not being preserved (it could as well be something else on my javascript code), but anyways, here's what I have now:

 

// Change hash for page-reload
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show');
} else {
    $('.nav-tabs a[href=#tab_account]').tab('show');
}
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    var url = document.location.toString();
    if (url.match('#')) {
        //$('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show');

        url = url.split("#")[0];
    }
    history.pushState( null, null, url + $(this).attr('href') );
});

 

Hopefully that telps someone else.

 

 

 

Tagged , , . Bookmark the permalink.

Leave a Reply