Question

我正在使用这样的bootstrap tabpanel：

<div class="row spiff_tabs_body">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs spiff_tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#home" aria-controls="home" role="tab" data-toggle="tab" onclick="FormGet('dashboard/delayedspiff', 'delayedspiff')">Potential Spiff</a>
                </li>
                <li role="presentation">
                    <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" onclick="FormGet('dashboard/instantspiff', 'delayedspiff')">Instant Spiff</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
                <div role="tabpanel" class="tab-pane" id="instantspiff"></div>
            </div>
        </div>
    </div>
</div>

使用javascript我需要确定用户所在的选项卡。我真的不确定怎么做。我已经阅读了很多关于选择活动标签的内容，但我无法真正了解如何检查用户选择的标签。

更新：

我忘了提及我需要能够检查条件if语句选择哪个选项卡，然后根据哪个选项卡处于活动状态来执行某些操作。

我需要做这样的事情：

<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // here is the new selected tab id
    var selectedTabId = e.target.id;
});

var id = $('.tab-content .active').attr('id');
if (id == "instantspiff") {
    alert("instantspiff");
}
else {
    alert("delayedspiff");
}
</script>

Answer 1

使用jQuery获取活动选项卡的id，因为它内置于Bootstrap中：

id = $(".active").attr('tab-pane id');

然后，就这样做吧：

  $('#' + id)

Answer 2

检查这个

var id = $('.tab-content .active').attr('id');
if(id == "delayedspiff") {
    alert("delayedspiff");
}
else {
    alert("instantspiff");
}

当他们点击标签时添加此

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // here is the new selected tab id
    var selectedTabId = e.target.id;
});

Bootstrap tabpanel选择了哪个选项卡

2 个答案: