Bootstrap-tabblad activeren met JQuery

Ik heb de volgende 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>

En het volgende script:

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

In dit geval, wanneer de pagina gereed is, wordt het tweede tabblad geactiveerd, maar ik krijg altijd een JavaScript-fout in de regel $('.tab-pane a[href="#' + tab + '"]').tab();

Kan iemand me alsjeblieft helpen?

Antwoord 1, autoriteit 100%

Het toepassen van een selector uit de .nav-tabslijkt te werken:
Zie deze demo.

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

Ik heb liever het antwoord van @codedme, want als je weet welk tabblad je wilt voordat de pagina wordt geladen, moet je waarschijnlijk de pagina-html wijzigen en JS niet gebruiken voor deze specifieke taak.

Ik heb ook de demoaangepast voor zijn antwoord.

(Als dit niet werkt, specificeer dan uw instelling – browser, omgeving, enz.)

Antwoord 2, autoriteit 13%

Klik op de link naar het tabbladanker wanneer de pagina gereed is, bijv.

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

Of in vanille JavaScript

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

Antwoord 3, autoriteit 12%

Deze is vrij eenvoudig van 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')

Antwoord 4, autoriteit 6%

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

Voeg actieve klasse toe aan elk li-element dat u actief wilt hebben na het laden van de pagina.
En ook het toevoegen van actieve klasse aan inhoud div is nodig, fade-in klassen zijn handig voor een soepele overgang.