CODEWITHSUNDEEP
jqueryhtmltwitter-bootstraptabscustom-data-attribute
technoTarek
technoTarek

Reputation: 3218

How do I link from one tab to another in Twitter Bootstrap?

Say you have several tabs created using Twitter Bootstrap. How can you link from one tab to another on the same exact page?

For example, let's say on my first tab, I want to link to my second tab.

Upvotes: 2

Views: 867

Answers (2)

Wouter van Vliet
Wouter van Vliet

Reputation: 1524

Slight variant to the proposed solution, that suits me better:

HTML:

<a class="btn" href="#login-signup" data-toggle="destination-tab">Sign up</a>

JS:

$(document).on('click', 'a[data-toggle="destination-tab"]', function(event) {
    event.preventDefault();
    var hash = this.href.replace(/^.+#/, '#');
    $('a[href="' +hash+ '"][data-toggle=tab]:first').click();
});

This version has the advantage of being able to use the href attribute for linking, makes sure that the link you're "clicking" actually is actually one that toggles a tab and (not unimportant) limits the number of links that are being linked to one.

Upvotes: 2

technoTarek
technoTarek

Reputation: 3218

There was an issue opened about this on the official Bootstrab Git repo. The answer from Fat took me a second to figure out and I wanted to make it relatively easy to scale.

Here's some code and a working fiddle.

$("a[data-tab-destination]").on('click', function() {
    var tab = $(this).attr('data-tab-destination');
    $("#"+tab).click();
});

In addition to using the jquery above, you have to give each tab anchor an ID:

<ul class="nav nav-tabs" id="myTabs">
  <li class="active"><a id="tab-1" href="#one" data-toggle="tab">TAB #1</a></li>
  <li><a href="#two" id="tab-2" data-toggle="tab">TAB #2</a></li>
  <li><a href="#three" id="tab-3" data-toggle="tab">TAB #3</a></li>
</ul>

Then reference that ID in a custom data attribute like so:

<a data-tab-destination="tab-2">Go to Tab #2</a>

Here's a working fiddle: http://jsfiddle.net/technotarek/3hJ46/

Upvotes: 1

Related Questions