有没有更好的方法在 Twitter Bootstrap 中显示活动选项卡？

Question

我正在使用 Twitter Bootstrap 3.0.1 选项卡内容和导航选项卡。我的选项卡内容中有下一个链接，因此用户可以单击下一步而不是单击选项卡，并且在使用这些下一步按钮后，我希望正确的选项卡显示为沮丧。

我注意到当我有链接时，选项卡没有显示为沮丧，因为没有添加 li 活动类。我把这个 JavaScript 放在一起让它工作，但我觉得应该有更简单的方法？

DOM：

<ul class="nav nav-tabs">
    <li class="active"><a href="#cardType" data-toggle="tab">1) Select a package</a></li>
    <li><a href="#address" data-toggle="tab">2) Address package</a></li>
    <li><a href="#amount" data-toggle="tab">3) Specify Gift Amount</a></li>
    <li><a href="#pay" data-toggle="tab">4) Pay</a></li>
</ul>

<div class="tab-content">
        <div class="tab-pane active" id="cardType">
            <a href="#address" data-toggle="tab">Next</a>
        </div>
        <div class="tab-pane" id="address">
        </div>
        <div class="tab-pane" id="amount">
        </div>
        <div class="tab-pane" id="pay">
        </div>
</div>

这是我的 JavaScript，用于在单击下一个链接时按下选项卡：

$(document).ready(function () {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        e.target // activated tab
        e.relatedTarget // previous tab

        var targetTab = e.target.href.split('#')[1];
        console.log(targetTab);
        $(".nav-tabs a").parent().removeClass('active');
        $(".nav-tabs a[href=#" + targetTab + "]").parent().addClass('active');
    });
});

我也尝试过使用 .show ，但这并没有为我按下正确的选项卡。也许我做错了什么？

$(document).ready(function () {
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                e.target // activated tab
                e.relatedTarget // previous tab

                var targetTab = e.target.href.split('#')[1];
                $('#myTab a[href="' + targetTab + '"]').tab('show');
            });
        });

Answer 1

找到了解决办法，把你的JS改成：

$('a[data-nexttab]').on('click', function () {
    var id = $(this).data('nexttab');
    $('.nav-tabs li:eq(' + id + ') a').tab('show');   
});

下一个按钮 HTML 到：

<!-- Note that the id is 0-indexed -->
<a href="#address" data-nexttab="1">Next</a>

JSFiddle

---

更新

如果你有多组标签，这会中断，所以你可以把JS改成这样：

$('a[data-nexttab]').on('click', function () {
    var id = $(this).data('nexttab');
    $(this).closest('.tab-content')
           .siblings('.nav-tabs')
           .find('li:eq(' + id + ') a')
           .tab('show');   
});

jsFiddle

Answer 2

如果包含 jquery 和 bootstrap.js 文件，则无需自定义 javascript

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>

演示：Fiddle