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

You can do a small trick to achieve this:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = this.href.split('#');
    $('.nav a').filter('[href="#'+target[1]+'"]').tab('show');
})

http://jsfiddle.net/s6bP9/

Answer 2

The simplest answer is to do it like this:

<a href="#" id="profilelink">Profile Link From Outside</a>

then in javascript add:

$(document).ready(function () {
    $("#profilelink").click(function () {
        $('.nav a[href="#profile"]').tab('show');           
    });
});

This will change both the content view and the active button on the top using the built in method of the jquery tabs plugin. If you wanted to add more buttons outside the tab area, then you can make it more general eg.

<a href="#profile" class="outsidelink">Profile Link From Outside</a>


$(document).ready(function () {
    $(".outsidelink").click(function () {
        $('.nav a[href="' +  $(this).attr("href") + '"]').tab('show');          
    });
});

Answer 3

Try this:

<li ....> 
<a href="#tab-number">Tab Title</a>
</li> 

and them your url look like this: "[URL]#tab-number"

I hope help you.... Regards...

Answer 4

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

<ul class="nav nav-pills">
    <li class="active"><a href="#default_id" data-toggle="pill">Default tab</a></li>
    <li><a href="#other_id" data-toggle="pill">Other tab</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="default_id">
    ...
    </div>
    <div class="tab-pane" id="other_id">
    ...
    </div>
</div>

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

Answer 5

Based on Omiod response, (I don't have enough rep to put it as a comment -- doh!)

A one-liner to do the same without the extra script markup:

<a href="javascript:void(0);" onclick="$('.nav-tabs a[href=\'#TABID\']').click();">LINK NAME</a>

Answer 6

Probably need to just add/subtract classes when you add an external link. It not really bound to the tab at all.

$(".outside-link").click(function() {
    $(".nav li").removeClass("active");
    $($(this).attr("data-toggle-tab")).parent("li").addClass("active");
});

Working Fiddle: http://jsfiddle.net/Bp2jm/