jquery/css实现步骤条

效果图如下:

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>卖家发货</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样式:

/*订单状态进度条*/
.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代码:(可以优化下，我这么写是为了直观，便于理解)

    // 订单详情进度条
    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");
    }