零基础做带“下一步”按钮的步骤条，核心是理清html结构和css逻辑：必须用ol而非ul或div以保障语义与可访问性；每个li需包裹可聚焦元素；通过data-step属性和css类控制状态，js仅维护计数器并切换class；按钮需满足44×44px触控热区，并设touch-action: manipulation。
零基础做带“下一步”按钮的步骤条，核心不是写多复杂的 JS，而是先理清 HTML 结构和 CSS 控制逻辑——JS 只是锦上添花，没它也能跑通基本流程。
步骤条必须用 ol 而不是 ul 或 div
步骤有明确顺序，“第 1 步→第 2 步→第 3 步”是天然的有序语义，ol（ordered list）自带编号和可访问性支持，屏幕阅读器会读出“第 2 项，共 4 项”，而 ul 或 div 需要手动加 aria-setsize/aria-posinset 才能模拟，徒增负担。
- 别写
<div class="step">登录</div>—— 语义丢失，无法被键盘Tab自然聚焦到每个步骤 - 正确结构是：
<ol class="steps"> <li>登录</li> <li>验证</li> <li>完成</li> </ol> - 每个
li内部必须包裹可聚焦元素（如a或button），否则键盘用户无法操作
next 按钮点击后，如何让当前步骤高亮并推进？
最轻量的做法是：不依赖 JS 判断“当前在哪”，而是让每一步都带一个 data-step 属性，next 按钮只负责递增计数器并切换类名。这样避免了 DOM 查询和状态同步问题。
- HTML 中给每个
li加data-step="1"、data-step="2"… - CSS 用
.steps li[data-step="2"].active控制样式，比用:nth-child(2)更可靠（后者易受 DOM 变动影响） - JS 里只需维护一个
currentStep = 1变量，点击时currentStep++，然后移除所有.active，再给对应data-step的li加上 - 别在按钮上写
onclick="goToStep(3)"—— 这会让步骤跳转失控，且无法禁用已过步骤
移动端点击区域太小，“下一步”按不到？
根本原因不是按钮字小，是点击热区不足。iOS 和 Android 都要求最小触控目标为 44×44px，低于这个尺寸，手指一按就容易误触或无响应。
- 别只调
font-size，优先设min-height: 44px+padding: 12px 24px - 如果按钮是
inline元素（比如a），记得加display: inline-block或display: block，否则padding不生效 - 用
touch-action: manipulation告诉浏览器这是个纯操作区域，减少 300ms 点击延迟 - 测试时真机连 Chrome DevTools 的 “Device Toolbar”，别只靠鼠标模拟
真正卡住初学者的，往往不是怎么写按钮，而是没意识到步骤条本质是个「状态机」：每个步骤有三种状态（未开始 / 当前 / 已完成），而 next 按钮只是触发状态迁移的开关。把状态映射到 class 名（如 step--pending / step--active / step--done），CSS 控制视觉，JS 只管更新 class，整条链路就清晰了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
