Linking to the Bootstrap tab from the side - how to set the tab to “active”?

Question

I have a Bootstrap Tab tab with three content tabs. It works great, except that I want to associate one of the tabs with the INTERNAL navigation on the tab. This means that when someone clicks a link outside the tab window, it should set this tab to “active” and show the contents.

At the moment, it correctly displays the contents of this tab, but the tab is not set to “active”. How can I achieve this so that it is “active”, as if someone 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 jsFiddle to show it better: http://jsfiddle.net/fLJ9E/

Thanks so much for any help or tips :)

Answer 1

You can do a little 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

I had the same problem, and I decided to just raise the click event on the appropriate tab and let Bootstrap do what it needed.

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

Answer 3

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 the presentation of the content and the active button at the top using the built-in jquery tab plugin method. If you want to add more buttons outside the tab area, you can make it more general, for example.

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

Below a little trick I did, this works for me.

I can call the webpage by adding bootstrap id to the url.

For example, a call to mypage.html # other_id will display the matching labels #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's 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 quite what you need, but you can update it to suit your needs. Tell me if you need an explanation.

Answer 5

You probably just need to add / subtract classes when adding an external link. It is not attached to the tab at all.

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

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

Answer 6

Try the following:

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

and their url looks like this: "[URL] # tab-number"

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

Answer 7

Based on the reaction of Omiod, (I don't have enough reputation to express this as a comment - doh!)

Single line to do the same without additional markup script:

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