控制bootstrap上的活动选项卡

Question

我在bootstrap上做了标签.

<div class="tabbable tabs-left">
    <ul class="nav nav-tabs">
        <li><a href="#menu23" data-toggle="tab">Beethoven</a></li>
        <li><a href="#menu24" data-toggle="tab">Bach</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane" id="menu23">
            item1
        </div>
        <div class="tab-pane" id="menu24">
            item2
        </div>
    </div>

我想通过按钮或某些动作激活item1或item2.

我该怎么做？

Answer 1

使用bootstrap按钮导航下一步| 上一页

<div class="btn-group">
    <button class="btn" id="prevtab" type="button">Prev</button>
    <button class="btn" id="nexttab" type="button">Next</button>
</div>

然后在你的javascript中添加

var $tabs = $('.tabbable li');

$('#prevtab').on('click', function() {
    $tabs.filter('.active')
         .prev('li')
         .find('a[data-toggle="tab"]')
         .tab('show');
});

$('#nexttab').on('click', function() {
    $tabs.filter('.active')
         .next('li')
         .find('a[data-toggle="tab"]')
         .tab('show');
});