web-dev-qa-db-fra.com

Bootstrap activation de l'onglet avec JQuery

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 sera prête, le deuxième onglet sera activé mais j'obtiendrai toujours une erreur JavaScript dans la ligne $('.tab-pane a[href="#' + tab + '"]').tab();

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

javascriptjquerytwitter-bootstrap
61
user2607411

L’application d’un sélecteur à partir du .nav-tabs semble fonctionner: voir cette démo .

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

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

Je préférerais la réponse de @ codedme, car si vous savez quel onglet vous voulez avant de charger la page, vous devriez probablement changer la page HTML et ne pas utiliser JS pour cette tâche particulière.

J'ai également modifié démo pour obtenir sa réponse.

(Si cela ne fonctionne pas pour vous, veuillez spécifier votre paramètre - navigateur, environnement, etc.)

144
MasterAM

Cliquez sur le lien vers l’ancre de l’onglet lorsque la page est prête, c.-à-d.

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

Ou en JavaScript vanille

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

Celui-ci est assez simple à partir de 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')
13
Amine Boulaajaj
<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>

Ajoutez une classe active à tout élément li que vous souhaitez activer après le chargement de la page. Il est également nécessaire d’ajouter une classe active à content div. Les classes de fondu entrant sont utiles pour une transition en douceur.

10
codedme

Ajouter un attribut id à une balise html

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

Puis en utilisant JQuery

$("#tab_aaa").tab('show');
7
Dmytro Goncharuk

pourquoi ne pas sélectionner d'abord l'onglet actif, puis le contenu de l'onglet sélectionné?
1. Ajoutez la classe 'active' à l'élément <li> de l'onglet en premier.
2. utilisez ensuite set 'active' class to div sélectionné.

    $(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'); 
        } 
    }
0
Kanit P.