Activation des onglets Bootstrap avec JQuery

Question

J'ai le code suivant :

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

Et le script suivant :

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

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

Dans ce cas, lorsque la page est prête, le deuxième onglet sera activé mais je reçois toujours une erreur JavaScript dans la ligne suivante $('.tab-pane a[href="#' + tab + '"]').tab();

Quelqu'un peut-il m'aider, s'il vous plaît ?

Answer 1

Je viens de me débattre avec ce problème et je vais vous expliquer ma situation.

J'ai mes onglets dans une modale bootstrap et je règle ce qui suit au chargement (avant que la modale ne soit déclenchée) :

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

Lorsque l'onglet était sélectionné, le volet actuel n'était pas visible. Vous devez donc ajouter active au volet également :

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

Dans mon cas, le volet avait #profile (mais cela aurait pu facilement être .pane:first-child ) qui affiche alors le bon volet.

Answer 2

Pourquoi ne pas sélectionner d'abord l'onglet actif puis activer le contenu de l'onglet sélectionné ?
1. Ajoutez la classe 'active' à l'élément < li > du premier onglet .
2. utilisez ensuite la classe "active" pour la division sélectionnée.

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

Answer 3

Cela fonctionne bien avec Bootstrap 5.1.3.

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