jQuery Twitter Bootstrap 选项卡选择
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18443062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Twitter Bootstrap Tab select
提问by Mr.Web
I've been looking around the net and tried many examples but can't figure out why I can't show a specific tab thru jQuery. This is my tab html:
我一直在网上环顾四周并尝试了许多示例,但无法弄清楚为什么我无法通过 jQuery 显示特定选项卡。这是我的标签 html:
<ul class="nav nav-tabs nav-inside-tabs" id="cartTabs">
<li class="active"><a href="#cart-tab" data-toggle="tab" class="cart-btn">Purchases</a></li>
<li><a href="#cart-data-tab" data-toggle="tab" id="cart-data-btn" class="cart-btn">Data</a></li>
<li><a href="#cart-pay-tab" data-toggle="tab" id="cart-pay-btn" class="cart-btn">Pay</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="cart-tab">
Cart
</div>
<div class="tab-pane" id="cart-data-tab">
Content data
</div>
<div class="tab-pane" id="cart-pay-tab">
Content pay
</div>
</div>
I tried a switch and the alert show up good, but doesn't activate the correct tab:
我尝试了一个开关,警报显示良好,但没有激活正确的选项卡:
$('#cart-goon-btn').click(function(e){
e.preventDefault();
if(!$(this).attr('disabled')){
var current_tab = $('.tab-pane.active').attr('id');
switch(current_tab){
case 'cart-tab':
$('#cartTabs li a').eq($('#cart-data-tab')).tab('show');
alertify.alert('1')
break;
case 'cart-data-tab':
//cart-pay-tab
alertify.alert('2')
break;
case 'cart-pay-tab':
//checkout
break;
}
}
});
Any hint?
任何提示?
回答by C???
Instead of calling .tab('show')
on the div
you want to be visible, try doing it on the a
element that you would use to activate it:
而不是调用的.tab('show')
对div
你想成为可见的,尝试做它在a
,你会用它来激活它元素:
$('a[href="#cart-data-tab"]').tab('show');
Or probably better yet, just do it by id:
或者可能更好,只需按 id 即可:
$('#cart-data-btn').tab('show');