javascript - 如何在进度条上显示步骤描述？

Question

我目前有这个，一个 Bootstrap 进度条:

<div class="progress">
   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="8" style="width: 20%;">
      Step 1 of 8
   </div>
</div>

我有一些选项卡，每次有一个处于事件状态时，我都会运行此命令:

jQuery('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  var step = jQuery(e.target).data('step');
  var percent = (parseInt(step) / 8) * 100;
  jQuery('.progress-bar').css({width: percent + '%'});
  jQuery('.progress-bar').text("Step " + step + " di 8");
});

这很好并且有效，但是将每个步骤的描述放在顶部怎么样？

更新

这是一个 jsFiddle

类似的东西

Answer 1

这里有一种使用 flexbox 的方法，既好又简单:

jQuery('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
    var step = jQuery(e.target).data('step');
    var percent = (parseInt(step) / 8) * 100;
    jQuery('.progress-bar').css({
        width: percent + '%'
    });
    jQuery('.progress-bar').text("Step " + step + " di 8");
});

#wiz_menu {
    display: flex;
    flex-direction: row;
}

#wiz_menu li {
    width: 100%;
    float: none;
    text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="8" style="width: 20%;">
        Step 1 of 8
    </div>
</div>

<ul id="wiz_menu" class="nav nav-tabs">
    <li class="active"><a href="#step1" data-toggle="tab" data-step="1">Your Details</a></li>
    <li><a href="#step2" data-toggle="tab" data-step="2">Bank Details</a></li>
    <li><a href="#step3" data-toggle="tab" data-step="3">Another step</a></li>
    <li><a href="#step4" data-toggle="tab" data-step="4">Step 4</a></li>
    <li><a href="#step5" data-toggle="tab" data-step="5">Step 5</a></li>
    <li><a href="#step6" data-toggle="tab" data-step="6">Step 6</a></li>
    <li><a href="#step7" data-toggle="tab" data-step="7">Step 7</a></li>
    <li><a href="#step8" data-toggle="tab" data-step="8">Step 8</a></li>
</ul>