"bootstrap" data-toggle=“tab” - comment faire un onglet actif avec un JS appel
J'ai une page JSP qui utilise des amorces data-toggle="tab" de la fonctionnalité. Lors du chargement de la page je fais un onglet actif.
<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 Highcharts sur le graphique de la page, à chaque fois qu'un utilisateur clique sur l'une des colonnes-je appeler une fonction JS qui fait tab2 l'onglet actif sur la page. L'intérieur de cette fonction, j'ai essayé quelques commandes différentes, mais aucune ne semble fonctionner. Je suis assez nouveau à jQuery donc je suis en espérant que quelqu'un pourrait être en mesure de préciser où je vais mal avec ma syntaxe.
function handleClick(){
//I've tried the following, none seem to work
$('#tab2').toggleClass('active');
$('#tab2').show();
$('#tab2').tab('show');
}
- Appelez le
.click()
méthode pour le lien:$('#mynav a[href="#tab2"]').click()
Vous devez vous connecter pour publier un commentaire.
D'abord, vous devez donner à vos onglets un
id
, je vais l'appeler myTabs:Ensuite, vous pouvez appeler et de montrer vos onglets par le nom de leur montrer:
Vous pouvez lire sur les onglets dans le bootstrap est la documentation.
<script> $('#myTabs a[href="#name"]').tab('show'); </script>
il a besoin d'unclick
,done
ou d'autres actions pour être activé.