Bootstrap tab activation with JQuery

Question

I have the following code:

<ul class="nav nav-tabs">
    <li><a href="#aaa" data-toggle="tab">AAA</a></li>
    <li><a href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

And the following script:

$(document).ready(function(){
    activaTab('aaa');
});

function activaTab(tab){
    $('.tab-pane a[href="#' + tab + '"]').tab('show');
};

In this case when the page is ready, the second tab will be activated but I always get a JavaScript error in the line $('.tab-pane a[href="#' + tab + '"]').tab();

Can anyone help me, please?

I think you wanted `$('.nav-tabs a[href="#' + tab + '"]').tab('show');`, right? Also, [`id`s can't start with a number.](http://stackoverflow.com/q/70579/1935077) — Petr R., Jul 24 '13 at 09:59
Why you are not using bootstrap.js?Just include boostrap.js in your html — codedme, Jul 24 '13 at 10:02
The error is object don't accept this property or method. The ids in my page dont start with a number. It was my mistake, its only an example. Bootstrap.js is included in the page — user2607411, Jul 24 '13 at 10:07
$('.nav-tabs a[href="#' + tab + '"]').tab('show'); didn't work. I edit the post with the ids changed — user2607411, Jul 24 '13 at 10:11

score 184 · Accepted Answer · edited Jan 19 '15 at 19:48

184

Applying a selector from the .nav-tabs seems to be working: See this demo.

$(document).ready(function(){
    activaTab('aaa');
});

function activaTab(tab){
    $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

I would prefer @codedme's answer, since if you know which tab you want prior to page load, you should probably change the page html and not use JS for this particular task.

I tweaked the demo for his answer, as well.

(If this is not working for you, please specify your setting - browser, environment, etc.)

edited Jan 19 '15 at 19:48

Mike

20,721
13
66
79

answered Jul 24 '13 at 10:30

MasterAM

15,074
6
40
62

together with bootstrap. In the template i add all the bootstrap js (including jquery.js) Can i have any problem in this imports? Other bootstrap components like modal panel works fine – user2607411 Jul 24 '13 at 10:51
Do you have a live version of your page? – MasterAM Jul 24 '13 at 11:31
Sorry MasterAM dont have any live version. Seems that i have a problem with bootstrap.js. I have added in my page jquery.js, bootstrap.js and jsf and richfaces js. All reference to .tab() allways return a js error – user2607411 Jul 25 '13 at 14:22
Try to eliminate some of the parts until you get the relevant segment of the page. Then, with a smaller part of the page, it should be easier for you to identify the reason things are not working. – MasterAM Jul 25 '13 at 16:12
Hi. I have an example that not work. https://mega.co.nz/#!hU1ECCaQ!LaL0dBTK2eALE_R8sQzcLSUCZAkWhSnueA3mz56PvkM i used jquery 1.8.3 and the last version of bootstrap – user2607411 Jul 26 '13 at 06:59
You are using the wrong selector. use `$('.nav-tabs a[href="#' + tab + '"]')`. If you can produce the page this way, I suggest to set the proper HTML in the first place. – MasterAM Jul 26 '13 at 09:35
When I try to use this in my web app (who contains jsf and richfaces) i must add $.noConflict(). If not include this I allways get a javascript error – user2607411 Jul 26 '13 at 10:04
1

I updated your jsFiddles because the bootstrap URL has changed since you posted this answer. – Mike Jan 19 '15 at 19:49
element.focus() not work after `$('.nav-tabs a[href="#' + tab + '"]').tab('show');` – Fábio Zangirolami Apr 17 '16 at 16:14
I am not sure I understand what is not working. If you have a specific issue, it may be more suitable to create it as a separate question (you can reference this question or answer in it). Then, I can try to answer it if I can. – MasterAM Apr 17 '16 at 16:19
used $('#navtabs a[href="#' + tab + '"]').tab('show'); because if nav-tabs class do exist in my css, navtabs is for sure the id of my tabs navbar :) – Zzirconium Mar 16 '17 at 12:43
substitute nav-tabs with nav-pills if necessary :) – rogerdpack Apr 26 '17 at 21:47
In some environments, you have to escape the double quotes for proper concatenation like $('.nav-tabs a[href=\"#' + tab + '\"]').tab('show'); . Might be useful for someone :) – Ramprasath Jun 05 '18 at 23:21
It is not working after submission of form with JQuery – Faris MX Jun 09 '18 at 03:38

Kamran Ahmed · Answer 2 · 2018-07-04T08:42:11.560

24

Perform a click on the link to the tab anchor whenever the page is ready i.e.

$('a[href="' + window.location.hash + '"]').trigger('click');

Or in vanilla JavaScript

document.querySelector('a[href="' + window.location.hash + '"]').click();

edited Jul 04 '18 at 08:42

answered Nov 10 '13 at 09:31

Kamran Ahmed

9,682
18
56
96

Simple solution and straight to point. For those who might have issue, wrap it into a document ready function. i.e `$(document).ready(function(){ $('a[href="' + window.location.hash + '"]').trigger('click'); });` – Julius Sep 14 '18 at 18:38

score 21 · Answer 3 · answered May 03 '17 at 19:07

This one is quite straightforward from w3schools: https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp

// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')

// Select first tab
$('.nav-tabs a:first').tab('show') 

// Select last tab
$('.nav-tabs a:last').tab('show') 

// Select fourth tab (zero-based)
$('.nav-tabs li:eq(3) a').tab('show')

codedme · Answer 4 · 2013-07-24T10:36:15.513

10

<div class="tabbable">
<ul class="nav nav-tabs">
    <li class="active"><a href="#aaa" data-toggle="tab">AAA</a></li>
    <li><a href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane fade active in" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>
</div>

Add active class to any li element you want to be active after page load. And also adding active class to content div is needed ,fade in classes are useful for a smooth transition.

edited Jul 24 '13 at 10:36

answered Jul 24 '13 at 10:21

codedme

586
2
12

I need active one tab depending of a condition. Not allways the first tab will be selected when the page is load – user2607411 Jul 24 '13 at 10:25
I think that you should also give the content dive the `active` class. – MasterAM Jul 24 '13 at 10:25
@MasterAM yes you are right and also fade class to have a smooth transition .Edited – codedme Jul 24 '13 at 10:29
I add the class="active" to the first tab but the javascript error didn't disapear. The tab take the active style but the content didn't appear – user2607411 Jul 24 '13 at 10:32
I edited the code please use this one.you need to also add active class to content div element. – codedme Jul 24 '13 at 10:33

score 10 · Answer 5 · answered Aug 09 '18 at 09:52

Add an id attribute to a html tag

<ul class="nav nav-tabs">
    <li><a href="#aaa" data-toggle="tab" id="tab_aaa">AAA</a></li>
    <li><a href="#bbb" data-toggle="tab" id="tab_bbb">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab" id="tab_ccc">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

Then using JQuery

$("#tab_aaa").tab('show');

score 2 · Answer 6 · answered Nov 13 '19 at 10:48

Having just struggled with this - I'll explain my situation.

I have my tabs within a bootstrap modal and set the following on load (pre the modal being triggered):

$('#subMenu li:first-child a').tab('show');

Whilst the tab was selected the actual pane wasn't visible. As such you need to add active class to the pane as well:

$('#profile').addClass('active');

In my case the pane had #profile (but this could have easily been .pane:first-child) which then displayed the correct pane.

score 0 · Answer 7 · answered Nov 16 '17 at 09:26

why not select active tab first then active the selected tab content ?
1. Add class 'active' to the < li > element of tab first .
2. then use set 'active' class to selected div.

    $(document).ready( function(){
        SelectTab(1); //or use other method  to set active class to tab
        ShowInitialTabContent();

    });
    function SelectTab(tabindex)
    {
        $('.nav-tabs li ').removeClass('active');
        $('.nav-tabs li').eq(tabindex).addClass('active'); 
        //tabindex start at 0 
    }
    function FindActiveDiv()
    {  
        var DivName = $('.nav-tabs .active a').attr('href');  
        return DivName;
    }
    function RemoveFocusNonActive()
    {
        $('.nav-tabs  a').not('.active').blur();  
        //to >  remove  :hover :focus;
    }
    function ShowInitialTabContent()
    {
        RemoveFocusNonActive();
        var DivName = FindActiveDiv();
        if (DivName)
        {
            $(DivName).addClass('active'); 
        } 
    }

Bootstrap tab activation with JQuery

7 Answers7

Linked