jquery实现进度条状态展示

<span class="right">9:00</span>
</span>
<span class="on-waite">
<span class="left">9:00</span>
<span class="right">12:00</span>
</span>
<span class="on-close">
<span class="left">13:00</span>
<span class="right">16:00</span>
</span>
<span class="on-waring">
<span class="left">13:00</span>
<span class="right">16:00</span>
</span>

</div>
</body>
<script src="./jquery.min.js"></script>
<script>
$(function () {

$('.title-bar').on('click', 'span', function () {
var i = $(this).index();
console.log(i);
if (i == 0) {
$('.on-work').show().css({ "width": "100%", "border-radius": "20px", "background-color": "#FFCA25", "z-index": "10" }).siblings().hide()
} else if (i == 1) {
$('.on-waite').show().css({ "width": "100%", "border-radius": "20px", "background-color": "#3960FB", "z-index": "10" }).siblings().hide()
} else if (i == 2) {
$('.on-close').show().css({ "width": "100%", "border-radius": "20px", "background-color": "#00D5FF", "z-index": "10" }).siblings().hide()
} else if (i == 3) {
$('.on-waring').show().css({ "width": "100%", "border-radius": "20px", "background-color": "#FD1E60", "z-index": "10" }).siblings().hide()
}
})

})
</script>

</html>

希望可以给有需要的人提供思路。