jQuery Twitter Bootstrap标签选择

Question

我在网上找了很多例子，但是不能通过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>

我尝试了一个开关，弹出框显示良好，但不能激活正确的选项卡：

$('#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;
        }
    }
});

任何提示？

- Mr.Web

Answer 1

不要在你想要显示的 div 上调用 .tab('show')，而是尝试在你用来激活它的 a 元素上调用：

$('a[href="#cart-data-tab"]').tab('show');

或者更好的做法是，通过id来执行：

$('#cart-data-btn').tab('show');

- Cᴏʀʏ

---

:D 运行得非常好！谢谢。几分钟后我会将其作为答案检查！ - Mr.Web

此外，alertify.js 插件看起来非常不错 - 感谢您通过提问向我介绍它！ - Cᴏʀʏ

第一个对我有用，而第二个则没有。考虑到我的React框架，这很好 :) 谢谢 - Andy

如果你在这里寻找一种从jQuery切换Bootstrap选项卡的方法，那么这个方法可以实现：$('a[href="#cart-data-tab"]').click()。 - fozylet