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>
谢里夫·艾哈迈德(Sherif Ahmed)

检查这个

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;
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery Twitter Bootstrap选项卡选择

来自分类Dev

将Bootstrap CheckBox放入TabPanel选项卡不会选中/取消选中

来自分类Dev

页面加载时的Bootstrap自动选择选项卡

来自分类Dev

AngularJS的Bootstrap选项卡

来自分类Dev

Bootstrap嵌套选项卡

来自分类Dev

Twitter Bootstrap选定的选项卡问题

来自分类Dev

使Bootstrap 3选项卡响应

来自分类Dev

在Bootstrap选项卡中嵌套CGridView

来自分类Dev

jQuery,Bootstrap单击以删除选项卡

来自分类Dev

在Bootstrap中激活单击的选项卡

来自分类Dev

twitter bootstrap 3选项卡视图

来自分类Dev

AngularJS UI Bootstrap选项卡示例

来自分类Dev

AngularJS与Bootstrap选项卡冲突

来自分类Dev

链接到特定选项卡的Bootstrap

来自分类Dev

Bootstrap选项卡的MixItUp问题

来自分类Dev

Bootstrap显示/隐藏选项卡组件

来自分类Dev

以编程方式创建Bootstrap选项卡

来自分类Dev

嵌套选项卡-Twitter Bootstrap

来自分类Dev

Bootstrap 3选项卡CSS定制

来自分类Dev

Bootstrap 3选项卡和列表

来自分类Dev

Angular Bootstrap中的选项卡

来自分类Dev

Bootstrap显示/隐藏选项卡组件

来自分类Dev

Bootstrap选项卡的MixItUp问题

来自分类Dev

在Bootstrap选项卡周围添加边框

来自分类Dev

通过PHP浏览Bootstrap选项卡

来自分类Dev

如何隐藏 Bootstrap 选项卡内容?

来自分类Dev

响应式 BootStrap 4 选项卡

来自分类Dev

无法选项卡选择Bootstrap导航栏中的下拉菜单

来自分类Dev

bootstrap-typeahead.js v2.3.2从建议的选项选择选项并在新选项卡中打开