Question

单击“继续”步骤，然后在步骤5中单击“上一步”，然后单击“继续”（在步骤4中），进度条不会向前移动。它似乎陷入困境。知道为什么会这样吗？

<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

这可能是因为有多个＆＃39; a＆＃39;带有数据切换到同一容器的标签。

对上一次按钮点击进行类似的实现，然后一切似乎都很好。

// Previous button click event
$('.prev').click(function() {
    var prevId = $(this).parents('.tab-pane').prev().attr('id');
    $('a[href=#' + prevId + ']').click();
});

这是您更新的小提琴 - http://jsfiddle.net/hmwqkpjf/12/

Bootstrap进度条向导卡住了

1 个答案: