2013-08-26 19 views
6

私はネットを見ていて、多くの例を試しましたが、なぜjQueryを使って特定のタブを表示できないのか分かりません。これは私のタブhtmlです:jQuery Twitter Bootstrapタブを選択

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

任意のヒントを?

答えて

25

代わりのdivあなたが見えるようにしたい、あなたはそれをアクティブにするために使用するa要素でそれをやってみてください上.tab('show')を呼ぶ:まだ

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

それとも、おそらくより良いが、ちょうどidでそれを実行します。

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

@ Mr.Web:私の編集を参照してください。ブートストラップで私の記憶をリフレッシュしなければならなかった。 –

+0

:D魅力的な作品! Tks。数分後に私は答えとしてそれをチェックします! –

+1

また、 'alertify.js'プラグインは本当に素晴らしく見えます - あなたの質問でそれを私に導いてくれてありがとう! –

関連する問題