css步骤流程效果实现,CSS实现的步骤流程

HtmlCssJs

第1步

第2步

第3步

第4步

第5步

第6步

第7步

第8步

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;

}

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

}

};

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3