[英]Bootstrap tabpanel which tab is selected
我正在使用這樣的引導程序選項卡:
<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>
使用jQuery獲取活動選項卡的ID,因為它內置在Bootstrap中:
id = $(".active").attr('tab-pane id');
然后,只需執行以下操作:
$('#' + id)
檢查這個
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;
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.