Aktivierung der Bootstrap-Registerkarte mit JQuery

Ich habe den folgenden 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>

Und das folgende Skript

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

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

In diesem Fall, wenn die Seite fertig ist, wird die zweite Registerkarte aktiviert, aber ich bekomme immer einen JavaScript-Fehler in der Zeile $('.tab-pane a[href="#' + tab + '"]').tab();

Kann mir bitte jemand helfen?

Das Anwenden eines Selektors aus dem .nav-tabsscheint zu funktionieren: Siehe diese Demo .

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

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

Ich würde die Antwort von @ codedme vorziehen, da Sie, wenn Sie vor dem Laden der Seite wissen, welche Registerkarte Sie möchten, wahrscheinlich das Seiten-HTML ändern und JS für diese bestimmte Aufgabe nicht verwenden sollten.

Ich habe auch die Demo für seine Antwort optimiert .

(Wenn dies bei Ihnen nicht funktioniert, geben Sie bitte Ihre Einstellung an - Browser, Umgebung usw.)

Klicken Sie auf den Link zum Registerkartenanker, wenn die Seite fertig ist

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

Oder in Vanille-JavaScript

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

Dieser ist von w3schools ganz einfach: 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')

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

Fügen Sie jedem li-Element, das nach dem Laden der Seite aktiv sein soll, eine aktive Klasse hinzu. Außerdem muss dem Inhaltsbereich eine aktive Klasse hinzugefügt werden. Das Einblenden von Klassen ist für einen reibungslosen Übergang hilfreich.

Fügen Sie einem HTML-Tag ein ID-Attribut hinzu

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

Dann mit JQuery

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

Nachdem ich gerade damit gekämpft habe, erkläre ich meine Situation.

Ich habe meine Registerkarten in einem Bootstrap-Modal und stelle beim Laden Folgendes ein (bevor das Modal ausgelöst wird):

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

Während die Registerkarte ausgewählt wurde, war der tatsächliche Bereich nicht sichtbar. Als solches müssen Sie dem Bereich auch activeKlasse hinzufügen :

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

In meinem Fall hatte das Fenster #profile(aber das hätte leicht sein können .pane:first-child) das dann das richtige Fenster angezeigt.

Warum nicht zuerst die aktive Registerkarte auswählen und dann den Inhalt der ausgewählten Registerkarte aktivieren?
1. Fügen Sie zuerst die Klasse 'active' zum Element <li> der Registerkarte hinzu.
2. Verwenden Sie dann set 'active' class für das ausgewählte 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'); 
        } 
    }