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