Bootstrap 3通过jquery更改选项卡

Question

我使用的是bootstrap 3主题和一些标签，你可以在这里看到：

<div class=\"panel-heading\">
    <div class=\"panel-options\">
        <ul class=\"nav nav-tabs\">
            <li class=\"active\"><a data-toggle=\"tab\" href=\"#tab-1\">Gruppenadressen</a></li>
            <li class=\"\"><a data-toggle=\"tab\" href=\"#tab-2\">Live-Stream</a></li>
            <li class=\"\"><a data-toggle=\"tab\" href=\"#tab-3\">Datenbank</a></li>
        </ul>
    </div>
</div>

<div class=\"panel-body\">
    <div class=\"tab-content\">
        <div id=\"tab-1\" class=\"tab-pane active\">Tab 1</div>
        <div id=\"tab-2\" class=\"tab-pane active\">Tab 2</div>
        <div id=\"tab-3\" class=\"tab-pane active\">Tab 3</div>...

如何使用jquery打开另一个选项卡？

这是我的函数

$(document).ready(function() {
    function filter(selector, query) {
        <- HERE I LIKE TO OPEN tab-2
    }
});

但我不知道它是怎么工作的。

Answer 1

我会像这样设置我的表格

<ul class="nav nav-tabs" role="tablist" id="myTabs">
    <li class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab1</a></li>
    <li><a href="#tab2" role="tab" data-toggle="tab">Tab2</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="tab1"></div>
    <div class="tab-pane" id="tab2"></div>
</div>

然后，您可以通过编程方式选择

function selectTab2() {
    $('#myTabs a[href="#tab2"]').tab('show') // Select tab by name
}