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

Your code works for me but you didn't put bootstrap in it. – number5 Dec 03 '11 at 14:54 — number5, Dec 03 '11 at 14:54
See Manage Resources(2), i dont understand what you mean – Otto Dec 03 '11 at 14:57 — Otto, Dec 03 '11 at 14:57
Ok, I saw that now. Sorry my fault. – number5 Dec 03 '11 at 15:00 — number5, Dec 03 '11 at 15:00

score 30 · Answer 1 · edited Apr 26 '17 at 21:53

30

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

edited Apr 26 '17 at 21:53

rogerdpack

62,887
36
269
388

answered Apr 12 '12 at 20:28

Guvener Gokce

804
14
20

And if you are solely using url hashes to select active tab, you can automate the process with this generic code: $(document).ready(function() { var url_hash = window.location.hash.split('-')[0]; if (url_hash[0] == '#') $('#tabs a[href="' + url_hash + '"]').tab('show'); }); – JeromeParadis Oct 21 '14 at 21:03

score 7 · Accepted Answer · answered Dec 03 '11 at 15:40

7

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

answered Dec 03 '11 at 15:40

Otto

4,020
6
35
46

1

Normally you can just use `$('#mytab a').first().tab('show')`. If it turns out you need to set the `tab-content` div to `active`, check your id for your tab head. You might have spaces in the id. – AZ. May 24 '14 at 05:51

score 1 · Answer 3 · answered Jul 08 '17 at 03:41

1

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

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

answered Jul 08 '17 at 03:41

codecypher

837
9
14

score 1 · Answer 4 · answered Dec 03 '11 at 15:07

1

You can do it like this:

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

answered Dec 03 '11 at 15:07

number5

15,913
3
54
51

score -4 · Answer 5 · edited May 23 '17 at 12:25

-4

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

edited May 23 '17 at 12:25

Community

1
1

answered Dec 03 '11 at 15:00

Jim Jose

1,319
11
17

Doesnt work for me: $('.tabs').tabs('select', 1); Neither load. – Otto Dec 03 '11 at 15:24
3

`select` is a feature of jQuery UI tabs, but is not available in Twitter Bootstrap tabs. – Synchro Mar 22 '12 at 19:39

Jquery and twitter bootstrap make active tab doesnt work

5 Answers5