 <p>There is a comment thread here: <a href="https://github.com/twbs/bootstrap/issues/2415" rel="nofollow">https://github.com/twbs/bootstrap/issues/2415</a> and NONE of the solutions work as smoothly as this.</p> <p><strong>SOURCE: <a href="http://timforsythe.com/blog/hashtabs/" rel="nofollow">http://timforsythe.com/blog/hashtabs/</a></strong></p> <h2>DEMO: <a href="https://jsbin.com/quvelo/2/" rel="nofollow">https://jsbin.com/quvelo/2/</a></h2> <p><em>This solution links to tabs outside, inside, and wherever you want with a regular url.</em></p> <pre><code> $(window).load(function() { // cache the id var navbox = $('.nav-tabs'); // activate tab on click navbox.on('click', 'a', function (e) { var $this = $(this); // prevent the Default behavior e.preventDefault(); // send the hash to the address bar window.location.hash = $this.attr('href'); // activate the clicked tab $this.tab('show'); }); // will show tab based on hash function refreshHash() { navbox.find('a[href="'+window.location.hash+'"]').tab('show'); } // show tab if hash changes in address bar $(window).bind('hashchange', refreshHash); // read has from address bar and show it if(window.location.hash) { // show tab on load refreshHash(); } }); </code></pre> <p>You put this js AFTER your bootstrap.js inside the functions where you call the tooltip or popover (for example). I have a bootstrap-initializations.js file loaded after bootstrap.min.js in my document.</p> <p><em>USAGE: The same as you would use to link to an anchor:</em></p> <pre><code>&lt;a href="mypage.html#tabID"&gt;Link&lt;/a&gt; </code></pre>