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

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 le chargement de la page, vous devriez probablement modifier le html de la page et ne pas utiliser de JS pour cette tâche particulière.

J'ai modifié le demo pour sa réponse, également.

(Si cela ne fonctionne pas pour vous, veuillez préciser votre configuration - navigateur, environnement, etc.)

Answer 2

Effectuez un clic sur le lien vers l'ancre de l'onglet dès que la page est prête.

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

Ou en vanille JavaScript

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

Answer 3

Celui-ci est assez simple et provient 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')

Answer 4

<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 la classe active à tout élément li que vous souhaitez rendre actif après le chargement de la page. Il est également nécessaire d'ajouter la classe active au div de contenu, les classes de fondu enchaîné sont utiles pour une transition en douceur.

Answer 5

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