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')

  1. Get the hash from URL and display active tab
  2. 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;
  });
});