Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

Here is my solution to the problem, a bit late perhaps. But it could maybe help others:

// Javascript to enable link to tabvar hash = location.hash.replace(/^#/, '');  // ^ means starting, meaning only match the first hashif (hash) {    $('.nav-tabs a[href="#' + hash + '"]').tab('show');} // Change hash for page-reload$('.nav-tabs a').on('shown.bs.tab', function (e) {    window.location.hash = e.target.hash;})

UPDATE

For Bootstrap 3, change .on('shown', ...) to .on('shown.bs.tab', ....)

This is based off of @dubbe answer and this SO accepted answer. It handles the issue with window.scrollTo(0,0) not working correctly. The problem is that when you replace the url hash on tab shown, the browser will scroll to that hash since its an element on the page. To get around this, add a prefix so the hash doesn't reference an actual page element

// Javascript to enable link to tabvar hash = document.location.hash;var prefix = "tab_";if (hash) {    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');} // Change hash for page-reload$('.nav-tabs a').on('shown', function (e) {    window.location.hash = e.target.hash.replace("#", "#" + prefix);});

Example of use

If you have tab-pane with id="mytab" you need to put your link like this:

<a href="yoursite.com/#tab_mytab">Go to Specific Tab </a>

you could trigger a click event on the corresponding tab link:

$(document).ready(function(){  if(window.location.hash != "") {      $('a[href="' + window.location.hash + '"]').click()  }});