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

Question

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

Accepted Answer

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

```
// Javascript to enable link to tab
var hash = location.hash.replace(/^#/, '');  // ^ means starting, meaning only match the first hash
if (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;
})
```

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

Solution

Problem

Related problems