Make Bootstrap tab Active on the bases of URL link
Depending on how you have set up your JS you should be able to do this:
www.myurl.com/page#tab1
www.myurl.com/page#tab2
www.myurl.com/page#tab3
Where #tab1
, #tab2
and #tab3
are equal to the id
of the tab
EDIT
See here: Twitter Bootstrap - Tabs - URL doesn't change
You can achieve it using jquery something like this. Your URL for example "www.myurl.com/page#tab1";
var url = window.location.href;
Get the tab to make active from url link.
var activeTab = url.substring(url.indexOf("#") + 1);
Remove old active tab class
$(".tab-pane").removeClass("active in");
Add active class to new tab
$("#" + activeTab).addClass("active in");
Or directly open tab after getting activeTab.
$('a[href="#'+ activeTab +'"]').tab('show')
- Get the hash from URL and display active tab
- Set the current hash to the URL
You can use this code:
$(function(){
var hash = window.location.hash;
hash && $('ul.nav.nav-pills a[href="' + hash + '"]').tab('show');
$('ul.nav.nav-pills a').click(function (e) {
$(this).tab('show');
$('body').scrollTop();
window.location.hash = this.hash;
});
});