Jquery and twitter bootstrap make active tab doesnt work

Question

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

Answer 1

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

Answer 2

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

Answer 3

You can do it like this:

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

Answer 4

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")

Answer 5

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