使用 JQuery 激活 Bootstrap 选项卡

小开

<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.

小开

最佳答案

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

小开

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();

小开

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

小开

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

小开

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

小开

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.

小开

Works fine on Bootstrap 5.1.3.

$('#nav-profile-tab').click();