垂直步骤条应使用语义化 ol 包裹含 a 标签的 li，通过 ::before/::after 生成连接线与状态标记，点击时用事件委托更新 class 并 scrollIntoView 平滑滚动。

垂直步骤条的HTML结构怎么写才支持点击跳转

垂直步骤条本质是带状态的导航列表，必须用语义化结构保证可访问性和点击区域连续性。别用一堆 div 堆砌，直接用 ol 或 ul 包裹 li，每个 li 里放 a 标签——这是点击生效的前提。

• 每个步骤项必须是独立可聚焦的 a 或 button，不能只靠 div onclick
• ol 更合适：步骤有明确顺序，浏览器和屏幕阅读器能识别序号
• a 的 href 设为 #step-1 这类锚点，方便原生滚动定位
• 避免把整个 li 设为点击目标，否则焦点框不清晰、移动端易误触

CSS怎么实现垂直排列+连接线+状态标记

连接线不是用图片或伪元素硬画，而是利用 ::before 和 ::after 配合定位生成，这样状态切换时只需改类名，不用操作 DOM。

• 给 ol 设 position: relative，作为连接线的定位上下文
• 每个 li 设 position: relative，用 ::before 画圆点（状态图标），::after 画竖线（除最后一项）
• 连接线高度靠 height: 100% + top: 1.5em 控制，避免被上一项覆盖
• 当前激活项用 .active 类控制圆点颜色和文字加粗，已完成项用 .done 区分样式

JavaScript点击后如何同步更新状态和滚动定位

点击不是单纯加 class，要处理三件事：清除旧状态、设置新状态、滚动到对应区域。别漏掉 preventDefault()，否则页面跳转会打断体验。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 监听 ol 的事件委托，用 e.target.matches('a') 判断是否点中链接
• 用 document.querySelector(e.target.hash) 找到目标锚点元素，再调 scrollIntoView({ behavior: 'smooth' })
• 状态更新只操作 class：先移除所有 .active 和 .done，再给已点击项加 .active，给它之前所有项加 .done
• 注意：如果目标锚点不存在，scrollIntoView 会静默失败，建议加 if (targetEl) 判断

移动端点击区域太小怎么办

默认 a 标签在手机上点击反馈弱，且容易点空。必须扩大可点击范围，但不能破坏布局流。

立即学习“前端免费学习笔记（深入）”；

• 给 a 设 display: block + padding: 1rem 0.75rem，让整行可点
• 圆点用 transform: translateX(-50%) 居左对齐，避免用 margin-left 导致点击区偏移
• 连接线用 left: 0.75rem 定位，与文字左侧对齐，保持视觉连贯
• 禁用 user-select: none 在 a 上，否则长按会触发复制菜单干扰操作

实际做时最容易忽略的是状态同步逻辑——比如用户手动滚动到某区域，步骤条没跟着变；或者点了未完成的步骤却没做校验就跳转。这些得额外加 IntersectionObserver 或表单验证来补，但基础点击跳转按上面四步走，稳得住。