ブートストラップのプログレスバーウィザードが表示される

Question

手順を続行し、手順5で[前へ]をクリックしてから[続行]（手順4）をクリックすると、進行状況バーが前に移動しません。それは固まっているようだ。なぜこれが起こっているのか、どんな考えですか？

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

これは、複数の同じコンテナにデータトグルと '' タグを有することに起因するかもしれません。

前のボタンをクリックしたときと同じように実装すると、すべてが良好であるように見えます。 http://jsfiddle.net/hmwqkpjf/12/