console
var curStep = 2;
function preStep(){
var contentdom = document.getElementById("step_content");
var stepdoms = document.getElementsByClassName("step");
var buttondom = document.getElementById("buttons1").getElementsByTagName("button")[1];
if(curStep == 1) {
stepdoms[curStep].setAttribute("class","step step2 noactive")
} else if(curStep == 2) {
stepdoms[curStep].setAttribute("class","step step3 noactive")
} else if(curStep == 3) {
stepdoms[curStep].setAttribute("class","step step4 noactive")
} else if(curStep == 4) {
stepdoms[curStep].setAttribute("class","step step5 noactive")
}
if(curStep == 0) {
return;
}
curStep--;
if(curStep == 0) {
stepdoms[curStep].setAttribute("class","step step1 active");
contentdom.innerHTML = "基本信息";
} else if(curStep == 1) {
stepdoms[curStep].setAttribute("class","step step2 active");
contentdom.innerHTML = "附加信息";
} else if(curStep == 2) {
stepdoms[curStep].setAttribute("class","step step3 active");
contentdom.innerHTML = "高级设置";
} else if(curStep == 3) {
stepdoms[curStep].setAttribute("class","step step4 active");
contentdom.innerHTML = "构建成功";
}
buttondom.innerHTML = "下一步";
}
function nextStep(){
var contentdom = document.getElementById("step_content");
var stepdoms = document.getElementsByClassName("step");
var buttondom = document.getElementById("buttons1").getElementsByTagName("button")[1];
if(curStep == 0) {
stepdoms[curStep].setAttribute("class","step step1 actived")
} else if(curStep == 1) {
stepdoms[curStep].setAttribute("class","step step2 actived")
} else if(curStep == 2) {
stepdoms[curStep].setAttribute("class","step step3 actived")
} else if(curStep == 3) {
stepdoms[curStep].setAttribute("class","step step4 actived")
}
if(curStep == 4) {
return;
}
curStep++;
if(curStep == 1) {
stepdoms[curStep].setAttribute("class","step step2 active");
contentdom.innerHTML = "附加信息";
} else if(curStep == 2) {
stepdoms[curStep].setAttribute("class","step step3 active");
contentdom.innerHTML = "高级设置";
} else if(curStep == 3) {
stepdoms[curStep].setAttribute("class","step step4 active");
contentdom.innerHTML = "构建成功";
} else if(curStep == 4) {
stepdoms[curStep].setAttribute("class","step step5 active");
contentdom.innerHTML = "最终结束";
buttondom.innerHTML = "完成";
}
}
var curStep2 = 2;
function preStep2(){
var contentdom = document.getElementById("step_content2");
var stepdoms = document.getElementsByClassName("stepa");
var buttondom = document.getElementById("buttons2").getElementsByTagName("button")[1];
if(curStep2 == 1) {
stepdoms[curStep2].setAttribute("class","stepa step2 noactive")
} else if(curStep2 == 2) {
stepdoms[curStep2].setAttribute("class","stepa step3 noactive")
} else if(curStep2 == 3) {
stepdoms[curStep2].setAttribute("class","stepa step4 noactive")
} else if(curStep2 == 4) {
stepdoms[curStep2].setAttribute("class","stepa step5 noactive")
}
if(curStep2 == 0) {
return;
}
curStep2--;
if(curStep2 == 0) {
stepdoms[curStep2].setAttribute("class","stepa step1 active");
contentdom.innerHTML = "基本信息";
} else if(curStep2 == 1) {
stepdoms[curStep2].setAttribute("class","stepa step2 active");
contentdom.innerHTML = "附加信息";
} else if(curStep2 == 2) {
stepdoms[curStep2].setAttribute("class","stepa step3 active");
contentdom.innerHTML = "高级设置";
} else if(curStep2 == 3) {
stepdoms[curStep2].setAttribute("class","stepa step4 active");
contentdom.innerHTML = "构建成功";
}
buttondom.innerHTML = "下一步";
}
function nextStep2(){
var contentdom = document.getElementById("step_content2");
var stepdoms = document.getElementsByClassName("stepa");
var buttondom = document.getElementById("buttons2").getElementsByTagName("button")[1];
if(curStep2 == 0) {
stepdoms[curStep2].setAttribute("class","stepa step1 actived")
} else if(curStep2 == 1) {
stepdoms[curStep2].setAttribute("class","stepa step2 actived")
} else if(curStep2 == 2) {
stepdoms[curStep2].setAttribute("class","stepa step3 actived")
} else if(curStep2 == 3) {
stepdoms[curStep2].setAttribute("class","stepa step4 actived")
}
if(curStep2 == 4) {
return;
}
curStep2++;
if(curStep2 == 1) {
stepdoms[curStep2].setAttribute("class","stepa step2 active");
contentdom.innerHTML = "附加信息";
} else if(curStep2 == 2) {
stepdoms[curStep2].setAttribute("class","stepa step3 active");
contentdom.innerHTML = "高级设置";
} else if(curStep2 == 3) {
stepdoms[curStep2].setAttribute("class","stepa step4 active");
contentdom.innerHTML = "构建成功";
} else if(curStep2 == 4) {
stepdoms[curStep2].setAttribute("class","stepa step5 active");
contentdom.innerHTML = "最终结束";
buttondom.innerHTML = "完成";
}
}
<p>1. 步骤条一</p>
<div class="stepss">
<div class="steps">
<div class="step step1 actived">基本信息</div>
<div class="step step2 actived">附加信息</div>
<div class="step step3 active">高级设置</div>
<div class="step step4 noactive">构建成功</div>
<div class="step step5 noactive">最终结束</div>
</div>
<div id="step_content" class="step_content">
高级设置
</div>
<div id="buttons1" class="buttons">
<button onclick="preStep()">上一步</button>
<button onclick="nextStep()">下一步</button>
</div>
</div>
<p>2. 步骤条二</p>
<div class="stepss">
<div class="steps">
<div class="stepa step1 actived">基本信息</div>
<div class="stepa step2 actived">附加信息</div>
<div class="stepa step3 active">高级设置</div>
<div class="stepa step4 noactive">构建成功</div>
<div class="stepa step5 noactive">最终结束</div>
</div>
<div id="step_content2" class="step_content_2">
高级设置
</div>
<div id="buttons2" class="buttons buttons2">
<button onclick="preStep2()">上一步</button>
<button onclick="nextStep2()">下一步</button>
</div>
</div>
.stepss{
width:80%;
margin:auto;
}
.steps{
width:100%;
height:50px;
margin-top:30px;
}
.step{
display:inline-block;
width:20%;
border:solid 0px;
border-bottom:solid 3px #bfbfbf;
height:100%;
float:left;
text-align:center;
line-height:50px;
box-sizing:border-box;
color:#a6a6a6;
}
.step:before{
display:inline-block;
height:20px;
width:20px;
border:solid 1px #a6a6a6;
border-radius:50%;
margin-right:8px;
line-height:20px;
background:#a6a6a6;
color:#fff;
font-size:14px;
}
.step1:before{
content:"1";
}
.step2:before{
content:"2";
}
.step3:before{
content:"3";
}
.step4:before{
content:"4";
}
.step5:before{
content:"5";
}
.step.actived:before{
content:"✔";
background:#fff;
color:#1a75ff;
border-color:#1a75ff;
}
.step.active:before{
background:#1a75ff;
border-color:#1a75ff;
}
.step.active{
border-bottom:solid #1a75ff 3px;
color:#000;
}
.step_content{
border:solid 0px;
clear:both;
height:120px;
padding:10px;
margin:auto;
width:100%;
}
.buttons button{
height:36px;
width:80px;
line-height:100%;
text-align:center;
border-radius:4px;
background:#1a75ff;
border:none;
color:#fff;
}
.buttons button:first-child{
background:#fff;
color:#1a75ff;
border:solid 1px #999;
}
.buttons button:hover{
cursor:pointer;
}
.stepa{
display:inline-block;
width:20%;
border:solid 0px;
height:100%;
float:left;
text-align:center;
line-height:50px;
box-sizing:border-box;
position:relative;
color:#a6a6a6;
}
.stepa:before{
display:inline-block;
height:20px;
width:20px;
border:solid 2px #a6a6a6;
border-radius:50%;
line-height:20px;
background:#a6a6a6;
color:#fff;
font-size:14px;
position:absolute;
left:45%;
bottom:-10px;
}
.stepa:not(:last-child):after{
content:"";
display:inline-block;
height:2px;
width:100%;
background:#a6a6a6;
position:absolute;
bottom:0%;
left:50%;
z-index:-1;
}
.stepa.actived:before{
content:"✔";
background:#fff;
color:#1a75ff;
border-color:#1a75ff;
}
.stepa.actived:after{
background:#1a75ff;
}
.stepa.active:before{
background:#1a75ff;
border-color:#1a75ff;
}
.stepa.active{
color:#000;
}
.step_content_2{
border:solid 0px;
clear:both;
height:80px;
padding:20px;
margin:auto;
width:80%;
}
.buttons2{
margin:10%;
}