如何创建步骤进度条
最近，我需要简化我维护的网页用户的操作。为了尽可能简化流程，最好的方法是创建一个步骤进度条。
多步骤进度条是一种强大的工具，可以以分步骤的方式向客户展示工作进度。它非常实用，因为它可以让用户了解自己距离完成操作还有多远。
要创建一个基本的进度条，你需要使用Html、CSS和JavaScript。
我们先从HTML开始。以下格式需要使用Font Awesome字体库。
<div class="main">
<ul>
<li>
<i class="icons awesome fa-solid fa-user"></i>
<div class="step first">
<p>1</p>
<i class="awesome fa-solid fa-check"></i>
</div>
<p class="label">Profile</p>
</li>
<li>
<i class="icons awesome fa-solid fa-coins"></i>
<div class="step second">
<p>2</p>
<i class="awesome fa-solid fa-check"></i>
</div>
<p class="label">Finances</p>
</li>
<li>
<i class="icons awesome fa-solid fa-house"></i>
<div class="step third">
<p>3</p>
<i class="awesome fa-solid fa-check"></i>
</div>
<p class="label">Property</p>
</li>
<li>
<i class="icons awesome fa-regular fa-star-half-stroke"></i>
<div class="step fourth">
<p>4</p>
<i class="awesome fa-solid fa-check"></i>
</div>
<p class="label">Evaluation</p>
</li>
<li>
<i class="icons awesome fa-solid fa-thumbs-up"></i>
<div class="step fifth">
<p>5</p>
<i class="awesome fa-solid fa-check"></i>
</div>
<p class="label">Approval</p>
</li>
</ul>
</div>
以下是用于设置元素样式的代码。代码中包含了激活和未激活按钮的 CSS 样式。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
ul {
display: flex;
}
ul li {
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 40px;
}
ul li .icons {
font-size: 25px;
color: #1b761b;
margin: 0 60px;
}
ul li .label {
font-family: sans-serif;
letter-spacing: 1px;
font-size: 14px;
font-weight: bold;
color: #1b761b;
}
ul li .step {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: #d7d7c3;
margin: 16px 0 10px;
display: grid;
place-items: center;
color: ghostwhite;
position: relative;
cursor: pointer;
}
.step::after {
content: "";
position: absolute;
width: 197px;
height: 3px;
background-color: #d7d7c3;
right: 30px;
}
.first::after {
width: 0;
height: 0;
}
ul li .step .awesome {
display: none;
}
ul li .step p {
font-size: 18px;
}
ul li .active {
background-color: #1b761b;
}
li .active::after {
background-color: #1b761b;
}
ul li .active p {
display: none;
}
ul li .active .awesome {
display: flex;
}
产品功能需要使用 JavaScript 代码。以下代码说明了各个步骤最初如何处于非活动状态，然后如何通过点击每个步骤和事件监听器激活。
const first = document.querySelector(".first");
const second = document.querySelector(".second");
const third = document.querySelector(".third");
const fourth = document.querySelector(".fourth");
const fifth = document.querySelector(".fifth");
const steps = [first, second, third, fourth, fifth];
function nextStep(currentStep) {
steps.forEach(step => step.classList.remove("active"));
steps.forEach((step, index) => {
if (index <= currentStep) {
step.classList.add("active");
} else {
step.classList.remove("active");
}
});
}
steps.forEach((step, index) => {
step.addEventListener("click", () => {
nextStep(index);
});
});
最终产品外观如下：
