嚮導bootstrap返回當前選項卡

Question

我在我的應用程序中實現了嚮導引導。

我要檢索的當前選項卡的索引來測試 的顯示或隱藏按鈕 '下一步' '上一個'

---

$('#rootwizard').bootstrapWizard({ 
    'nextSelector': '.button-next', 
    'previousSelector': '.button-previous', 
    onTabClick: function (tab, navigation, index) { 
     var total = navigation.find('li').length; 

     // here i want get the currecnt index of tab clicked 
     var current = index +1 ; 
     alert(); 

     // set wizard title 
     $('.step-title', $('#rootwizard')).text('Step ' + (index) + ' of ' + total); 

     // set done steps 
     jQuery('li', $('#rootwizard')).removeClass("done"); 
     var li_list = navigation.find('li'); 

     for (var i = 0; i < index; i++) { 
      jQuery(li_list[i]).addClass("done"); 
     } 
     if (current == 1) { 
      $('#rootwizard').find('.button-previous').hide(); 
     } else { 
      $('#rootwizard').find('.button-previous').show(); 
     } 
     if (current >= 13) { 
      $('#rootwizard').find('.button-next').hide(); 
      $('#rootwizard').find('.button-submit').show(); 
     } else { 
      $('#rootwizard').find('.button-next').show(); 
      $('#rootwizard').find('.button-submit').hide(); 
     } 
     App.scrollTo($('.page-title')); 

的HTML：

<ul class="nav nav-tabs">        
    <li class=" active" id="dbt"><a href="#portlet_tab1" data-toggle="tab">aaa</a></li> 
    <li class=""><a href="#portlet_tab2" data-toggle="tab"> bbb </a></li> 
    <li class=""><a href="#portlet_tab3" data-toggle="tab"> ccc </a></li> 
    <li class=""><a href="#portlet_tab4" data-toggle="tab"> dddd </a></li> 
</ul> 

Answer 1

要顯示從$（document）.ready（）或您的代碼中的另一個函數的索引：

alert($('#rootwizard').bootstrapWizard('currentIndex')); 

就你而言，創建嚮導時，在聲明'onTabClick'函數時忘記了單引號。不管怎麼說，我建議你使用事件「onTabShow」來代替：

$('#rootwizard').bootstrapWizard({ 
'nextSelector': '.button-next', 
'previousSelector': '.button-previous', 
'onTabShow': function (tab, navigation, index) { 
    var total = navigation.find('li').length; 

    // here i want get the currecnt index of tab clicked 
    var current = index + 1 ; 
    alert(current); 

    // set wizard title --> CHANGED 'index' by 'current' 
    $('.step-title', $('#rootwizard')).text('Step ' + (current) + ' of ' + total); 

    // set done steps 
    jQuery('li', $('#rootwizard')).removeClass("done"); 
    var li_list = navigation.find('li'); 

    for (var i = 0; i < index; i++) { 
     jQuery(li_list[i]).addClass("done"); 
    } 
    if (current == 1) { 
     $('#rootwizard').find('.button-previous').hide(); 
    } else { 
     $('#rootwizard').find('.button-previous').show(); 
    } 
    if (current >= 13) { 
     $('#rootwizard').find('.button-next').hide(); 
     $('#rootwizard').find('.button-submit').show(); 
    } else { 
     $('#rootwizard').find('.button-next').show(); 
     $('#rootwizard').find('.button-submit').hide(); 
    } 
    App.scrollTo($('.page-title')); 

我有點晚了，我知道，但我希望它可以幫助別人。