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

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

I’m developing a web page in which I’m using Twitter’s Bootstrap Framework and their Bootstrap Tabs JS. It works great except for a few minor issues, one of which is I do not know how go directly to a specific tab from an external link. For example:
Home
Notes

should go to the Home tab and the Notes tab respectively when clicked on the links from an external page

Solutions/Answers:

Solution 1:

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

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})

Solution 2:

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 tab
var 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>

Solution 3:

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

$(document).ready(function(){

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

});

Solution 4:

This is an improved implementation of dubbe’s solution which prevent scrolling.

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show') ;
} 

// With HTML5 history API, we can easily prevent scrolling!
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    if(history.pushState) {
        history.pushState(null, null, e.target.hash); 
    } else {
        window.location.hash = e.target.hash; //Polyfill for old browsers
    }
})

Solution 5:

While the JavaScript solution provided may work, I went a slightly different way that requires no additional JavaScript, but does require logic in your view. You create a link with a standard URL parameter, like:

<a href = "http://link.to.yourpage?activeTab=home">My Link</a>

Then you simply detect the value of activeTab to write ‘class=”active”‘ in the appropriate <li>

Pseudocode (implement accordingly in your language). Note I’ve set ‘home’ tab as a default active if no parameter provided in this example.

$activetabhome = (params.activeTab is null or params.activeTab == 'home') ? 'class="active"' : '';
$activetabprofile = (params.activeTab == 'profile') ? 'class="active"' : '';

<li $activetabhome><a href="#home">Home</a></li>
<li $activetabprofile><a href="#profile">Profile</a></li>

Solution 6:

For Bootstrap 3:

$('.nav-tabs a[href="#' + tabID + '"]').tab('show');

https://jsfiddle.net/DTcHh/6638/