導航到在引導步向導

Question

這裏任何一個步驟是我的jsfiddle：DEMO

論點擊「保存&繼續」，在這一步導航到嚮導的下一個步驟。

如何導航到單擊某個特定步驟的任何步驟？ （而不是已經存在的分步序列）

$('.f1 .btn-next').on('click', function() { 
    var parent_fieldset = $(this).parents('fieldset'); 
    var next_step = true; 
    // navigation steps/progress steps 
    var current_active_step = $(this).parents('.f1').find('.f1-step.active'); 
    var progress_line = $(this).parents('.f1').find('.f1-progress-line'); 

    // fields validation 
    parent_fieldset.find('input[type="text"], input[type="password"], textarea').each(function() { 
     if($(this).val() == "") { 
      $(this).addClass('input-error'); 
      next_step = true; 
     } 
     else { 
      $(this).removeClass('input-error'); 
     } 
    }); 

Answer 1

編輯： - 添加按鈕以跳轉到特定步驟。 Fiddle

編輯： - 我修改你的小提琴check this

試試這個JsFiddle demo 我修改了HTML稍微加入了數據級參數既步驟DIV和相應的字段集連接。修改後，下面的功能將允許您通過單擊圖標在步驟之間跳轉。

$(this).parents('.f1').find('.f1-progress-line'); 

    fieldsetToActivate = $(this).data('step'); 
    let direction; 
    if (current_active_step.data('step') > fieldsetToActivate) { 
     direction = 'left'; 
    } else { 
     direction = 'right'; 
    } 
    $("form.f1 fieldset").hide(); 
    current_active_step.removeClass('active'); 
    // bar_progress(progress_line, direction); 
    // ************* // 
    var number_of_steps = progress_line.data('number-of-steps'); 
    var now_value = progress_line.data('now-value'); 

    var new_value = 0; 
    if (direction == 'right') { 
     new_value = fieldsetToActivate * (100/number_of_steps); 
    } else if (direction == 'left') { 
     new_value = fieldsetToActivate * (100/number_of_steps); 
    } 
    console.log('now:' + now_value + '- new: ' + new_value); 
    progress_line.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value); 
    // ****************** // 
    $('.f1').find(`fieldset[data-step='${fieldsetToActivate}']`).fadeIn('slow'); 
    // change icons 
    $('.f1-step').removeClass('activated'); 
    $(this).addClass('active'); 
    for (let j = 0; j < fieldsetToActivate; j++) { 
     $('.f1').find(`.f1-step[data-step='${j}']`).addClass('activated'); 
    } 
}); 

這是不是最好的解決方案，但是這將讓你的工作完成