Steps步骤条,Bootstrap风格步骤条
⽹上看到的Steps的风格并不是我想要的，⽽且不够简易，所以只能⾃⼰写⼀个(两个版本的Steps)  PS：没发现上传附件在哪，第⼆个版本就暂时不写了
直接上代码
HTML
<button onclick="addStep()">addStep</button>
<button onclick="clearSteps()">clearSteps</button>
<div class="steps">
<div class="step ">
<div class="step-head">
<div class="step-line"></div>
<div class="step-icon">
1
</div>
</div>
<div class="step-main">
步骤⼀
</div>
</div>
<div class="step">
<div class="step-head">
<div class="step-line"></div>
<div class="step-icon">
2
</div>
</div>
<div class="step-main">
步骤⼆
</div>
</div>
<div class="step">
<div class="step-head">
<div class="step-line"></div>
<div class="step-icon">
<div class="step-circle"></div>
</div>
</div>
<div class="step-main">
步骤三
</div>
</div>
<div class="step">
bootstrap 5
<div class="step-head">
<div class="step-icon">
<div class="step-circle"></div>
</div>
</div>
<div class="step-main">
步骤四
</div>
</div>
</div>
  css:
.
step {
position: relative;
vertical-align: top;
display: inline-block;
}
.step-head {
width: 18px;
height: 18px;
border-radius: 50%;
line-height: 19px;
text-align: center;
vertical-align: top;
color: #bfcbd9;
font-size: 14px;
border: 2px solid #bfcbd9;
z-index: 10000;
}
.step-main {
font-size: 12px;
color: #48576a;
}
.step-line {
position: absolute;
top: 9px;
height: 5px;
left: 22px;
right: -5px;
display: inline-block;
background-color: #bfcbd9;
z-index: 10000;
}
.step-circle {
margin: 4px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #bfcbd9;
}
.is-sucess > .step-head {
color: #2f318e;
border-color: #2f318e;
}
.is-sucess > .step-head .step-circle {
background-color: #2f318e;
}
.is-sucess > .step-head > .step-line {
background-color: #2f318e;
}
.last-sucess > .step-head {
color: #2f318e;
border-color: #2f318e;
}
.last-sucess > .step-head .step-circle {
background-color: #2f318e;
}
js部分：
var steps = $(".step");
var stepIndex = 0;
setStep(stepIndex);
$(".step-icon").click(function () {
var me = this;
stepIndex = $(me).parents(".step").index();        setStep(stepIndex);
});
function setStep(stepIndex) {
$(steps).removeClass("is-sucess");
$(steps).removeClass("last-sucess");
for (var i = 0; i <= stepIndex; i++) {
var step = steps[i];
if (i < stepIndex) {
$(step).addClass("is-sucess");
}
else {
$(step).addClass("last-sucess");
}
}
}
function clearSteps() {
  　stepIndex = -1;
    setStep(stepIndex);    }
function addStep(addnum) {
if (!addnum) { addnum = 1 }        stepIndex += addnum;
setStep(stepIndex);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。