JQuery Twitter Tab Bootstrap select

Question

I browsed the net and tried many examples, but I can’t understand why I cannot show a specific tab through jQuery. This is my html tab:

<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 the switch, and the warning appeared well, but did not 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 clues?

Answer 1

Instead of calling .tab('show') on a div you want to be visible, try doing this on element a , which you would use to activate it:

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

Or probably even better, just do it by id:

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