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
– number5

2011-12-03 14:54:49 +00:00
Commented Dec 3, 2011 at 14:54 — number5
– number5, Commented Dec 3, 2011 at 14:54
See Manage Resources(2), i dont understand what you mean

Otto
– Otto

2011-12-03 14:57:06 +00:00
Commented Dec 3, 2011 at 14:57 — Otto
– Otto, Commented Dec 3, 2011 at 14:57
Ok, I saw that now. Sorry my fault.

number5
– number5

2011-12-03 15:00:58 +00:00
Commented Dec 3, 2011 at 15:00 — number5
– number5, Commented Dec 3, 2011 at 15:00

rogerdpack · Accepted Answer · 2017-04-26 21:53:36Z

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, 2017 at 21:53

rogerdpack

67.7k40 gold badges291 silver badges410 bronze badges

answered Apr 12, 2012 at 20:28

Guvener Gokce

90414 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JeromeParadis Over a year ago

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'); });

Otto · Accepted Answer · 2011-12-03 15:40:09Z

7

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

answered Dec 3, 2011 at 15:40

Otto

4,1906 gold badges37 silver badges46 bronze badges

1 Comment

AZ. Over a year ago

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.

number5 · Accepted Answer · 2011-12-03 15:07:18Z

1

You can do it like this:

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

answered Dec 3, 2011 at 15:07

number5

16.6k3 gold badges57 silver badges51 bronze badges

Comments

aicoder · Accepted Answer · 2017-07-08 03:41:42Z

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 8, 2017 at 3:41

aicoder

92710 silver badges14 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:25:57Z

-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, 2017 at 12:25

CommunityBot

11 silver badge

answered Dec 3, 2011 at 15:00

Jim Jose

1,31911 silver badges17 bronze badges

2 Comments

Otto Over a year ago

Doesnt work for me: $('.tabs').tabs('select', 1); Neither load.

Synchro Over a year ago

select is a feature of jQuery UI tabs, but is not available in Twitter Bootstrap tabs.

Collectives™ on Stack Overflow

Jquery and twitter bootstrap make active tab doesnt work

5 Answers 5

1 Comment

1 Comment

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related