jquery - show tab with external link with onclick in bootstrap 3

Question

I want to link to a bootstrap 3.2.0 tab with a link like this:

<a href="#tab_i_want_to_link" onclick="something()">Tab name</a>

Thanks!!

Answer 1

There is a comment thread here: https://github.com/twbs/bootstrap/issues/2415 and NONE of the solutions work as smoothly as this.

SOURCE: http://timforsythe.com/blog/hashtabs/

DEMO: https://jsbin.com/quvelo/2/

This solution links to tabs outside, inside, and wherever you want with a regular url.

  $(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();
    }
    
});

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.

USAGE: The same as you would use to link to an anchor:

<a href="mypage.html#tabID">Link</a>