Linking to a Bootstrap Tab from outside - how to set the tab to “active”?

Question

I have a Bootstrap \"tab\" navigation with 3 different content tabs. It works perfectly except that I want to link to one of the tabs from OUTSIDE the tab navigation. Meanin

Answer 1

Below the little trick I did that works for me.

I can call the webpage adding the bootstrap pill id to the URL.

For instance calling mypage.html#other_id will display the pill matching #other_id

    
Default tab
    
Other tab


    

    ...
    
    

    ...
    

Here the JQuery code:

$(document).ready(function(){
    //Manage hash in URL to open the right pill
    var hash = window.location.hash;
    // If a hash is provided 
    if(hash && hash.length>0)
    {
        // Manage Pill titles
        $('ul.nav-pills li a').each(function( index ) {
            if($(this).attr('href')==hash)
                $(this).parent('li').addClass('active');
            else
                $(this).parent('li').removeClass('active');
        });
        // Manage Tab content
        var hash = hash.substring(1); // Remove the #
        $('div.tab-content div').each(function( index ) {
            if($(this).attr('id')==hash)
                $(this).addClass('active');
            else
                $(this).removeClass('active');
        });
    }
});

Edit: My code is not exactly what you need but you can update it to match your needs. Tell me if you need explanations