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>

Answer 2

刚刚为你的jsfiddle添加了一些代码，希望这会有所帮助。你必须根据你的要求修改它。

＆＃13;

    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");
    });

＆＃13;

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

＆＃13;

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

＆＃13;

编辑：您可以将标记（html）移动到步骤选项卡列表上方，并根据您的屏幕截图修改/设置样式。

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

如何在进度条上显示步骤说明？

2 个答案: