Önyükleme ilerleme çubuğu sihirbazı sıkışmış

Question

Adımlar boyunca devam'ı tıklattığınızda, Adım 5'te Önceki'yi ve ardından Devam'ı tıklatın (4. Adımda), ilerleme çubuğu ilerlemez. Sıkışmış gibi görünüyor. Bunun neden olduğuna dair bir fikrin var mı?

http://jsfiddle.net/hmwqkpjf/8/

<div class="tab-pane fade" id="step4"> 
    <div class="well"> 
     STEP4 
    </div> 
    <a data-step="3" data-toggle="tab" href="#step3" class="btn btn-default pull-left">Previous Step</a> 
    <a class="btn btn-default next" href="#">Continue</a> 
    </div> 

<div class="tab-pane fade" id="step5"> 
    <div class="well"> 
     STEP5 
    </div> 
    <a data-step="4" data-toggle="tab" href="#step4" class="btn btn-default pull-left">Previous Step</a> 
    <a class="btn btn-success first" href="#">Start over</a> 
    </div> 

JS:

$('.next').click(function(){ 

    var nextId = $(this).parents('.tab-pane').next().attr("id"); 
    $('[href=#'+nextId+']').tab('show'); 
    return false; 

}) 

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 

    //update progress 
    var step = $(e.target).data('step'); 
    var percent = (parseInt(step)/5) * 100; 

    $('.progress-bar').css({width: percent + '%'}); 
    $('.progress-bar').text("Step " + step + " of 5"); 

    //e.relatedTarget // previous tab 

}) 

$('.first').click(function(){ 

    $('#myWizard a:first').tab('show') 

}) 

Answer 1

Bu, aynı kaplar için veri geçiş ile 'a' etiketleri birden sahip olabilir.

Önceki düğmeler için benzer bir uygulama yapın, daha sonra her şey iyi görünüyor. http://jsfiddle.net/hmwqkpjf/12/