Bootstrap tab activation with JQuery
JavascriptJqueryTwitter BootstrapJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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.)
Solution 2 - Javascript
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();
Solution 3 - Javascript
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')
Solution 4 - Javascript
<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.
Solution 5 - Javascript
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');
Solution 6 - Javascript
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.
Solution 7 - Javascript
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');
}
}
Solution 8 - Javascript
Works fine on Bootstrap 5.1.3.
$('#nav-profile-tab').click();