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.
This code selects the right tab depending on the #hash and adds the right #hash when a tab is clicked. (this uses jquery)
In Coffeescript :
$(document).ready ->
if location.hash != ''
$('a[href="'+location.hash+'"]').tab('show')
$('a[data-toggle="tab"]').on 'shown', (e) ->
location.hash = $(e.target).attr('href').substr(1)
or in JS :
$(document).ready(function() {
if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
return $('a[data-toggle="tab"]').on('shown', function(e) {
return location.hash = $(e.target).attr('href').substr(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);
}
});
});
Here is another way to solve the Problem.
First add a line to the click event to show the hash in the Addressbar
$('#myTab').on('click', 'a', function (e) {
e.preventDefault();
// add this line
window.location.hash = $(this).attr('href');
$(this).tab('show');
})
Then make sure that the right tab is activated onload by adding this part to your document ready call.
if(window.location.hash){
$('#myTab').find('a[href="'+window.location.hash+'"]').tab('show');
}
All together you can write this:
// cache the id
var navbox = $('#myTab');
// activate tab on click
navbox.on('click', 'a', function (e) {
var $this = $(this);
// prevent the Default behavior
e.preventDefault();
// set the hash to the address bar
window.location.hash = $this.attr('href');
// activate the clicked tab
$this.tab('show');
})
// if we have a hash in the address bar
if(window.location.hash){
// show right tab on load (read hash from address bar)
navbox.find('a[href="'+window.location.hash+'"]').tab('show');
}
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');
};
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>
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')
}
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);
}
});
});
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
