通过 jquery 引导 3 更改选项卡

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
}