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

Question

我现在有一个引导进度栏：

<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>

I有一些选项卡，每当一个选项卡处于活动状态时，我运行如下：

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

下面是一种用柔性盒实现这个功能的方法，很好，很简单：

​

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>

​

Answer 2

刚刚添加了一些代码到你的小提琴手，希望这有帮助。你必须根据你的要求修改它。

​

    var maxProgressBarWidth = 0;
    jQuery('.nav li').each(function() {
    	maxProgressBarWidth += jQuery(this).outerWidth();
    });
    jQuery('.progress').width(maxProgressBarWidth);
    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('.tab-desc').removeClass('active').filter('[data-step=' + step + ']').addClass('active');
      jQuery('.progress-bar').css({width: percent + '%'});
      jQuery('.progress-bar').text("Step " + step + " di 8");
    });

.tab-desc {
  display: none;
}
.tab-desc.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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">Step 1</a></li>
                   <li><a href="#step2" data-toggle="tab" data-step="2">Step 2</a></li>
                   <li><a href="#step3" data-toggle="tab" data-step="3">Step 3</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>
                
<div class="tab-desc active" data-step="1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quia explicabo deserunt a, quod repellat necessitatibus quisquam perferendis unde quo! Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="2">
  ecessitatibus quisquam perferendis unde quo! Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="3">
  Lorem ipsum dolor sit amet, consectetur Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="4">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quia explicabo deserunt a, quod repellat necessitatibus quisquam perferendis unde quo! Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="5">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quia explicabo deserunt a, quod repellat necessitatibus quisquam perferendis unde quo! 
</div>
<div class="tab-desc" data-step="6">
   Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="7">
  Illo quia explicabo deserunt a, quod repellat necessitatibus quisquam perferendis unde quo! Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="8">
  Lorem ipsum dolor sit amet, consectetur 
</div>

​

编辑:您可以将标记(html)移动到steps选项卡列表的上方，并根据屏幕截图修改/样式它。

更新js以计算选项卡的宽度，并将其设置为进度div。