10

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

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

5 Answers 5

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

1
  • 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'); }); Oct 21, 2014 at 21:03
7

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

1
  • 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, 2014 at 5:51
1

You can do it like this:

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

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

2
  • Doesnt work for me: $('.tabs').tabs('select', 1); Neither load.
    – Otto
    Dec 3, 2011 at 15:24
  • 3
    select is a feature of jQuery UI tabs, but is not available in Twitter Bootstrap tabs.
    – Synchro
    Mar 22, 2012 at 19:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.