jquery - 向导 Bootstrap 返回当前选项卡

Question

我在我的应用程序中实现了向导 Bootstrap 。

我想检索当前选项卡的索引来测试显示或隐藏按钮“下一个”“上一个”

<小时/>

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

我知道我有点晚了，但我希望它可以帮助其他人。