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

jquery/css实现步骤条相关推荐

jquery 使用自适应步骤条
效果图先看step.css /*common css*/ .stepPage{display:none;height:100%; } .stepCont{width:100%; } .ystep-c ...
纯css 竖向步骤条
一.平常做一些物流啊提现啊这些效果的时候可能就需要用到步骤来向用户展示具体到哪一步了,但是呢有时候写的又比较繁琐,找各种组件插件又要安装或者引入对应的包,今天就给大家分享一个纯css的竖向步骤条,先看 ...
jquery css 流程进度条
方案1: 方案2: <!DOCTYPE html> <html><head> <meta charset="utf-8"> < ...
CSS实现步骤进度条——前端每日一练
CSS实现步骤进度条效果展示 HTML布局文件 CSS样式 JavaScript操作逻辑补充:JavaScript的this关键字效果展示 HTML布局文件总体布局,一个大div盒子包裹所有内 ...
html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下.今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 ...
jq步骤条 java_JQuery实现步骤条效果(上一步,下一步)
之前做出的步骤条是利用easyui +jquery实现的,但是他在隐藏板块的时候用到的是display:none,这会使我在板块中加载的js失效,所以换了一种方式,用Position.把元素脱离文档流 ...
CSS实现进度条和订单进度条
由于近期需要做一个订单进度条,比较直观的反应当前订单的状态,css样式借鉴了网上的相关代码,下面是效果图,以及实现说明一.说明 1.首先页面需要引入jQuery的相关js,一般页面都已经引入了就不多 ...
jQuery 分类导航菜单条点击变色
JQuery 分类导航菜单条点击变色,当点击导航菜单则当前点击选中导航菜单变色其它还原,依次类推. <script type="text/javascript" src=&q ...
ElementUI自定义icon步骤条
在使用ElementsUI中的步骤条时,有时会遇到自定义icon的情况.但element icon数量不多,可能找不到需要的. 这时我们可以自定义icon,同样通过类来引用.首先我们先下载好需要的ic ...

jquery/css实现步骤条

jquery/css实现步骤条相关推荐

最新文章

热门文章