進捗バーにステップの説明を表示するにはどうすればよいですか？

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> 

ザ・私はいくつかのタブがあり、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"); 
}); 

と、それは動作しますが、方法について上の各ステップの説明を持っている？

UPDATEは

これは、

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

はちょうどあなたのjsfiddleにいくつかのコードを追加して、それらの線に沿ってjsFiddle

何かであるこのことができます願っています。あなたの要件に応じてそれを修正する必要があります。

var maxProgressBarWidth = 0; 
 
    jQuery('.nav li').each(function() { 
 
    \t 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>

EDIT：あなたがステップ]タブのリストの上にマークアップ（HTML）を移動し、あなたのスクリーンショットごとに/それをスタイルを修正することができます。

更新JSタブの幅を計算し、divの