CODEWITHSUNDEEP
jquerytwitter-bootstrap
Otto
Otto

Reputation: 4190

Jquery and twitter bootstrap make active tab doesnt work

In twitter bootstrap js tabs i have to add a class "active" to a li element.

I obtain the hash from the url. I apply the class active to the tab but it doesnt get the focus.

I want to make the second tab active when the url have a certain hash.

Source code: http://jsfiddle.net/Chumillas/dU458/#example

Upvotes: 10

Views: 25867

Answers (5)

aicoder
aicoder

Reputation: 907

To make Bootstrap tabs work, there are two things you have to do to make a tab active:

  1. Set the li element to active (class="active")
  2. Set the tab div element to active (class="fade in active")

Upvotes: 1

Guvener Gokce
Guvener Gokce

Reputation: 804

Also with latest bootstrap-tab.js, you can use following call to select active tab.

Nav Sample:

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>

Get object with link and display call:

$('a[href="#tab2"]').tab('show');

Bests, G.

source:Twitter Bootstrap

Upvotes: 30

Otto
Otto

Reputation: 4190

I solved it, i need to set the div of the content of the tab active as well.

Upvotes: 7

number5
number5

Reputation: 16433

You can do it like this:

$(function (e) {
  var parts = decodeURI(e.target).split('#');
  $(".tabs").tabs().select(parts[1]);
});

Upvotes: 1

Jim Jose
Jim Jose

Reputation: 1319

Why are u not using the select method instead of changing the class yourself ??

check this, Selecting a jQuery Tab using a parameter in the URL

Upvotes: -4

Related Questions