效果圖如下:

html代碼：

<div class="order_status"><span class="s-step s-step0"><b><b></b></b><p></p><em>2017-05-05 10:01:05</em><div>提交訂單</div></span><span class="s-step s-step1"><b><b></b></b><p></p><em>2017-05-06 10:01:05</em><div>買家支付</div></span><span class="s-step s-step2 active"><b><b></b></b><p></p><em>2017-05-07 10:01:05</em><div>賣家發(fā)貨</div></span><span class="s-step s-step3"><b><b></b></b><p></p><em>2017-05-08 10:01:05</em><div>確認收貨</div></span><span class="s-step s-step4 "><b><b></b></b><em>2017-05-09 10:01:05</em><div>評價</div></span></div>
css樣式:

/*訂單狀態(tài)進度條*/ .order_status{height:120px;padding-top: 120px;padding-left: 160px} .order_status .s-step{float: left;width: 20%;height: 60px;position: relative;} .order_status .s-step:nth-child(5n){width:0px;} .order_status .s-step.active{float: left;width: 20%;height: 60px;position: relative;} .order_status .s-step>b>b.active{background-color: #f2572c} .order_status .s-step>b{display: block;width: 32px;height:32px;line-height: 32px;border-radius: 32px;position: absolute;margin-left: -16px;top: -20px;background: #ddd;z-index: 87} .order_status .s-step>b>b{display: block;width: 26px;height: 26px;line-height: 26px;border-radius: 26px;background: #ccc;margin-top: 3px;margin-left: 3px;z-index: 88} .order_status .s-step>p{width: 161px;height: 10px;background: #ddd;top: -28px;position: absolute;z-index: 86} .order_status .s-step>p.active{width: 161px;height: 10px;background: #f2572c;top: -28px;position: absolute;z-index: 86} .order_status .s-step em{display: block;padding-top: 20px;font-style: normal;text-align: center;color: #b7b7b7;font-size: 12px;margin-left: -65px;width: 130px} .order_status .s-step>div{display: block;width:80px;height:32px;line-height: 32px;position: absolute;margin-left: -40px;top: -55px;z-index: 87;text-align: center;font-size: 12px;color: #c9c4c4} .order_status .s-step>div.active{display: block;width:80px;height:32px;line-height: 32px;position: absolute;margin-left: -40px;top: -55px;z-index: 87;text-align: center;font-size: 12px;color: #f2572c}

js代碼:(可以優(yōu)化下，我這么寫是為了直觀，便于理解)

// 訂單詳情進度條if($(".s-step0").hasClass("active")){$(".s-step0>b>b,.s-step0>div").addClass("active");$(".s-step1>em,.s-step2>em,.s-step3>em,.s-step4>em").hide();}else if($(".s-step1").hasClass("active")){$(".s-step1>b>b,.s-step1>div,.s-step0>b>b,.s-step0>p,.s-step0>div").addClass("active");$(".s-step2>em,.s-step3>em,.s-step4>em").hide();}else if($(".s-step2").hasClass("active")){$(".s-step2>b>b,.s-step2>div,.s-step1>p,.s-step1>b>b,.s-step1>div,.s-step0>b>b,.s-step0>p,.s-step0>div").addClass("active");$(".s-step3>em,.s-step4>em").hide();}else if($(".s-step3").hasClass("active")){$(".s-step3>b>b,.s-step3>div,.s-step2>p,.s-step2>b>b,.s-step2>div,.s-step1>p,.s-step1>b>b,.s-step1>div,.s-step0>b>b,.s-step0>p,.s-step0>div").addClass("active");$(".s-step4>em").hide();}else{$(".s-step4>b>b,.s-step4>div,.s-step3>p,.s-step3>b>b,.s-step3>div,.s-step2>p,.s-step2>b>b,.s-step2>div,.s-step1>p,.s-step1>b>b,.s-step1>div,.s-step0>b>b,.s-step0>p,.s-step0>div").addClass("active");}

總結

以上是生活随笔為你收集整理的jquery/css实现步骤条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。