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

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

2 个答案:

JSFiddle