这是通过纯 CSS 实现的步骤流程效果, 扩展性强, 可以随意增加减少数量, 兼容性 ie6+.
html 代码
- <style type="text/css">
- ul{margin:0px; padding:0px; list-style:none;}
- .wrap{width:960px; height:auto; line-height:30px; margin:100px auto 0;}
- .step-case{height:40px;}
- .step-case li{ float:left; margin:0px; width:12.5%;position:relative; cursor:pointer;}
- .step-case li span{display:block; background-color:#ccc; height:40px; line-height:40px; text-align:center; color:#fff; font-weight:bold;}
- .step-case b{position:absolute; font-size:0px; line-height:0px; top:0px;}
- .step-case .b-l{border-width:2px 2px 2px 0; border-style:dashed solid dashed dashed; border-color:transparent #ccc transparent transparent; height:36px; left:-2px;}
- .step-case .b-r{border-width:2px 0 2px 2px; border-style:dashed dashed dashed solid; border-color:transparent transparent transparent #ccc; height:36px; right:-2px;}
- .step-case .b-1{border-width:20px 0 20px 20px; border-style:solid dashed solid solid; border-color:#ccc transparent #ccc #ddd; left:-20px;}
- .step-case .b-2{border-width:20px 0 20px 20px; border-style:dashed dashed dashed solid; border-color:transparent transparent transparent #ccc; left:-21px;}
- /* 当前状态 */
- .step-case .s-cur span{background-color:orange;}
- .step-case .s-cur .b-l{border-right-color:orange;}
- .step-case .s-cur .b-r{border-left-color:orange;}
- .step-case .s-cur .b-1{border-color:orange orange orange #FABF55;}
- .step-case .s-cur .b-2{border-left-color:#FADBA5;}
- /* 当前状态后 */
- .step-case .s-cur-next .b-2{border-color:transparent transparent transparent orange;}
- /* 完成的状态 */
- .step-case .s-finish span{background-color:#FADBA5; color:#000;}
- .step-case .s-finish .b-l{border-right-color:#FADBA5;}
- .step-case .s-finish .b-r{border-left-color:#FADBA5;}
- .step-case .s-finish .b-1{border-color:#FADBA5 #FADBA5 #FADBA5 #FABF55;}
- .step-case .s-finish .b-2{border-left-color:#FADBA5;}
- </style>
- <script type="text/javascript">
- window.onload = function(){
- var step = document.getElementById("step"),li = step.getElementsByTagName("li");
- for(var i = 0;i<li.length;i++){
- //(function(i){
- li[i].index = i;
- li[i].onclick = function(){
- var i = this.index;
- for(var j = 0;j<i;j++){
- li[j].className = "s-finish";
- }
- for(var j = li.length;j>i;){
- li[--j].className = "";
- if(j==i+1){
- li[j].className = "s-cur-next";
- }
- }
- this.className = "s-cur";
- }
- //})(i);
- }
- };
- </script>
- <div class="wrap">
- <ul class="step-case" id="step">
- <li class="s-finish"><span > 第 1 步 </span><b class="b-l"></b></li>
- <li class="s-finish"><span > 第 2 步 </span><b class="b-1"></b><b class="b-2"></b></li>
- <li class="s-finish"><span > 第 3 步 </span><b class="b-1"></b><b class="b-2"></b></li>
- <li class="s-finish"><span > 第 4 步 </span><b class="b-1"></b><b class="b-2"></b></li>
- <li class="s-cur"><span > 第 5 步 </span><b class="b-1"></b><b class="b-2"></b></li>
- <li class="s-cur-next"><span > 第 6 步 </span><b class="b-1"></b><b class="b-2"></b></li>
- <li><span > 第 7 步 </span><b class="b-1"></b><b class="b-2"></b></li>
- <li><span > 第 8 步 </span><b class="b-1"></b><b class="b-2"></b><b class="b-r"></b></li>
- </ul>
- </div>
来源: http://www.qdfuns.com/article/41635/61b40eb18275790cc86762703c496f5a.html