bootstrap data-toggle ="tab" - 如何使用JS调用激活标签

Question

我有一个JSP页面,它使用bootstraps data-toggle ="tab"功能.在页面加载时,我激活了一个选项卡.

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

我在页面上有一个Highcharts图表,只要用户点击其中一个我调用JS函数的列,它就会使tab2成为页面上的活动选项卡.在这个函数里面,我尝试了几个不同的命令,但似乎都没有.我对jQuery很陌生,所以我希望有人能够指出我的语法出错了.

function handleClick(){
    //I've tried the following, none seem to work
    $('#tab2').toggleClass('active');
    $('#tab2').show();
    $('#tab2').tab('show');
}

Answer 1

首先你需要给你的标签id,我会称之为myTabs:

<ul class="nav st-nav-tabs" id="myTabs">

然后,您可以按名称调用并显示标签以显示它们:

$('#myTabs a[href="#name"]').tab('show');

您可以在bootstrap的文档中阅读有关选项卡的信息.