bootstrap data-toggle = "tab" - comment rendre un onglet actif avec un appel JS
J'ai une page JSP qui utilise la fonctionnalité bootstraps data-toggle = "tab". Lors du chargement de la page, je active un onglet.
<ul class="nav st-nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">First Tab</a></li>
<li><a href="#tab2" data-toggle="tab">Second Tab</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1"></div>
<div class="tab-pane active" id="tab2"></div>
</div>
J'ai un graphique Highcharts sur la page, chaque fois qu'un utilisateur clique sur l'une des colonnes, j'appelle une fonction JS qui fait de tab2 l'onglet actif de la page. Dans cette fonction, j'ai essayé quelques commandes différentes mais aucune ne semble fonctionner. Je suis assez nouveau sur jQuery, j'espère donc que quelqu'un pourrait indiquer où je me trompe avec ma syntaxe.
function handleClick(){
//I've tried the following, none seem to work
$('#tab2').toggleClass('active');
$('#tab2').show();
$('#tab2').tab('show');
}
Vous devez d'abord donner à vos onglets un id, je l'appellerai myTabs:
<ul class="nav st-nav-tabs" id="myTabs">
Ensuite, vous pouvez appeler et afficher vos onglets par nom pour les afficher:
$('#myTabs a[href="#name"]').tab('show');
Vous pouvez lire sur les onglets dans le bootstrap documentation .