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. Meaning that when someone clicks a link outside the tab window, it should set to "active" that tab and show the content.

Right now, it shows the content of that tab correctly, but the tab is not set to "active". How do I achieve this so that it should as "active" as if someone had clicked?

Here is the code:

<div>
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">Home Content</div>
  <div class="tab-pane" id="profile">Profile Content</div>
  <div class="tab-pane" id="messages">Messages Content</div>
</div>
</div>

<p></p>

<a href="#profile" data-toggle="tab">Profile Link From Outside</a>

I made a jsFiddle to show it better: http://jsfiddle.net/fLJ9E/

Thank you very much for any help or hints :)

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

I had the same issue, and opted to just trigger a click event on the proper tab, and let Bootstrap do what is needed.

$('#link').on('click', function(){
  $('.nav-tabs a[href="#profile"]').click();
});

Answer 4

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 5

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 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/

Answer 7

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...