纯html+css无法实现可点击stepper，必须用javascript控制data-step或class状态；推荐语义化结构，css用::before画圆点、伪元素绘连线，js更新状态并同步ui与无障碍属性。
怎么用纯 HTML + CSS 实现可点击的 Stepper 步骤条
纯 HTML 无法驱动步骤状态切换，stepper 不是原生 HTML 标签，必须配合 JavaScript 控制当前步数和激活态。最简可行方案是：用 ol 或 div 布局步骤节点，CSS 控制视觉样式（圆圈、连线、文字），JS 绑定点击或「下一步」按钮来更新 data-step 或 class（如 active、completed）。
常见错误是只写 HTML 结构却不处理状态同步——比如点了第二步，内容没变、前一步圆圈没标完成、进度线没延伸。这会导致用户误以为操作无效。
- 步骤容器推荐用
ol，语义正确，天然有序；若需跳步，加tabindex="0"和role="button"提升可访问性 - 每个步骤项用
li，内部包含span（圆圈）、p（标题）、small（描述）等，避免用div堆砌 - CSS 中用
::before画圆圈比用●字符更可控（颜色、大小、边框可调） - 别忘了用
pointer-events: none禁用未激活步骤的默认点击反馈，否则容易误触
Vue/React 里怎么复用 Stepper 组件并控制分步提交
在框架中，Stepper 的核心不是 UI 渲染，而是「步骤状态管理」和「表单数据隔离」。直接把整个表单拆成多个 step 组件，每步只收集自己字段，提交时聚合所有步骤的 formRef 或 useState 值。
容易踩的坑是：在第二步修改第一步的字段，却没触发第一步的校验；或者点击「上一步」时，没保留用户已填内容（尤其带异步校验的输入框）。
- Vue 中用
ref拿子组件实例，调用其validate()方法，而不是全局this.$refs.form.validate() - React 中建议每步用独立的
useForm({ initialValues })，通过父组件useState合并各步数据，避免受控/非受控切换报错 - 禁用「跳步」时，检查
currentStep > 1 && !stepData[0].valid这类条件，而不是只看当前步 - 提交最终数据前，务必遍历所有步骤的校验结果，不要只校验当前步
为什么 form.submit() 在 Stepper 里经常不触发 submit 事件
因为多数人把「下一步」按钮写成 <button>下一步</button>，没设 type="button"，浏览器默认当 type="submit" 处理，导致整个 form 提交、页面刷新，Stepper 状态重置。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
另一个原因是：用了 event.preventDefault() 却忘了手动调用校验逻辑，用户点了没反应，以为卡死。
- 所有非最终提交的按钮必须显式写
type="button"，哪怕它在form标签内 - 最终「提交」按钮保留
type="submit"，但要在onSubmit里先event.preventDefault()，再聚合数据、调 API - 如果用
form.addEventListener('submit', ...)，确保监听的是最外层form，而不是某一步的局部form - Chrome 会静默忽略重复的
preventDefault()，但 Safari 可能报错，建议加if (event.defaultPrevented) return防御
移动端 Stepper 怎么避免滑动冲突和点击穿透
在 iOS 上，Stepper 步骤条常被误判为可滚动区域，手指横向滑动时触发了页面整体滚动，步骤圆圈点不中；安卓则可能出现点击后延迟响应，甚至穿透到底下层元素。
根本原因在于：步骤条用了 transform: translateX() 或 overflow-x: auto，又没处理 touch-action。
- 给步骤容器加
touch-action: manipulation，禁用双指缩放，提升点击响应速度 - 如果步骤条支持左右滑动切换（非推荐），用
touch-action: pan-x，并监听touchstart/touchend计算位移，别依赖scrollLeft - 避免在步骤项上用
position: absolute叠加遮罩层，容易导致z-index错乱和点击失效 - iOS Safari 中，
:active伪类默认不生效，得加cursor: pointer或空onclick属性才能触发
Stepper 真正难的不是画几个圆圈，而是状态、表单、交互、可访问性的耦合。任一环节断开，用户就会卡在第二步反复点击却毫无反馈——这种问题在线上环境很难复现，最好在开发阶段就用真机连 DevTools 测试触摸行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
