用原生DOM操作实现步骤条进度指示器，核心是通过class切换控制步骤节点状态（active/completed/inactive）和CSS伪元素动态显示连接线，配合currentStep变量驱动更新。
用 DOM 操作实现步骤条进度指示器，核心是动态控制步骤节点的激活状态和连接线的显示逻辑，不需要框架，纯原生 JS 就能完成。
结构准备：HTML 布局要清晰可操作
步骤条一般由三部分组成：步骤圆点（step）、连接线（line）、文字标签（label）。推荐用有序结构，比如 <ol> 或带语义的 <div class="steps"> 包裹每个步骤项：
<div class="steps">
<div class="step" data-step="1">
<div class="step-circle">1</div>
<div class="step-label">填写信息</div>
</div>
<div class="step" data-step="2">
<div class="step-circle">2</div>
<div class="step-label">验证身份</div>
</div>
<div class="step" data-step="3">
<div class="step-circle">3</div>
<div class="step-label">完成注册</div>
</div>
</div>
注意：每个 .step 是独立容器，不把连线写死在 HTML 里——连线用 CSS 伪元素或 JS 动态插入更灵活。
样式关键：用 CSS 控制视觉状态
通过 class 切换来表现「当前步」「已完成」「未开始」三种状态：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
.step--active：当前步骤，圆点高亮、文字加粗 -
.step--completed：已走过的步骤，圆点打勾或变色，文字灰色 -
.step--inactive：后续步骤，圆点浅灰、文字浅色
连接线可用 ::before 在非首个步骤前生成，并根据前一步是否完成来决定是否显示：
.step:not(:first-child) .step-circle::before {
content: '';
position: absolute;
top: 50%;
left: -50%;
width: 100%;
height: 4px;
background-color: #e0e0e0;
transform: translateY(-50%);
}
.step--completed + .step .step-circle::before,
.step--active + .step .step-circle::before {
background-color: #4caf50;
}
JS 控制：用数据驱动状态更新
定义当前步骤数（如 currentStep = 2），然后遍历所有步骤节点，按规则添加/移除 class：
- 步骤序号
< currentStep→ 添加step--completed - 步骤序号
=== currentStep→ 添加step--active，移除step--completed - 步骤序号
> currentStep→ 移除所有状态 class，保持默认
示例代码：
function updateStepIndicator(currentStep) {
const steps = document.querySelectorAll('.step');
steps.forEach((step, index) => {
const stepNum = parseInt(step.dataset.step);
step.classList.remove('step--active', 'step--completed');
if (stepNum < currentStep) {
step.classList.add('step--completed');
} else if (stepNum === currentStep) {
step.classList.add('step--active');
}
});
}
// 调用：走到第二步
updateStepIndicator(2);
进阶提示：支持点击跳转与边界保护
如果允许用户点击已激活或已完成的步骤回退，可以给每个 .step 绑定点击事件：
- 只响应
stepNum <= currentStep的点击（防止跳到未来） - 点击后触发
updateStepIndicator(stepNum) - 配合表单页切换时，建议把步骤状态和页面状态解耦，用统一的状态管理变量（如
let currentStep = 1）协调 DOM 和业务逻辑
不复杂但容易忽略：记得在初始化时调用一次 updateStepIndicator，否则页面加载后步骤条不会自动渲染。
