纯静态题号导航可用HTML+CSS实现锚点跳转：用1配合题干id="q1"，并设置scroll-behavior: smooth；但无法自动高亮或记录状态，仅适用于只读场景。

怎么用 HTML + CSS 实现题号导航栏（不依赖 JS）

纯静态题号导航是可行的，但必须接受一个前提：它只能做「视觉锚点跳转」，不能自动高亮当前题、不能记录作答状态、也不能联动滚动区域。适合只读试卷或简单自测场景。

核心是 @#@#@#@#@#@#@#@#@#@0，不要用 或

—— 否则无法被浏览器原生识别为可跳转锚点

题干容器必须设 id="q1"（不能用 class 或 data-id），且 id 值需符合 HTML ID 规范（不能以数字开头，推荐 q1、q2）

在 或滚动容器上加 style="scroll-behavior: smooth;"，否则跳转生硬；注意 Safari 旧版本不支持该属性

如果答题卡区域固定定位（position: fixed），要给题干顶部预留足够 padding/margin，避免被导航栏遮挡

用 JavaScript 实现「当前题高亮 + 滚动同步」

只要用户滚动或点击题号，就实时更新高亮状态，并让题号栏“跟随”当前可视题——这才是真实答题卡需要的行为。关键不是监听 scroll，而是用 IntersectionObserver。

• 不要用 window.onscroll + getBoundingClientRect() 手动计算，性能差、边界 case 多（比如题高度不一、有折叠题干）
• 为每道题创建一个 IntersectionObserver 实例，监听其是否进入视口；触发时更新 data-active="true" 到对应题号元素
• 题号栏本身也要监听点击：点击 后，调用 document.querySelector('#q3').scrollIntoView({ behavior: 'smooth' })
• 注意兼容性：IntersectionObserver 在 iOS 12.2+ 和 Android Chrome 51+ 支持良好；如需支持更老版本，可用 polyfill 或降级为 scroll + throttle

如何让题号导航支持「未答/已答/标记」三种状态

状态管理必须和表单控件绑定，不能只靠 class 切换。否则刷新页面后状态丢失，也无法导出答案数据。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 每道题的输入控件（、、）必须有唯一 name（如 name="q3"），这样提交时才能结构化取值
• 用 change 事件监听作答动作，而非 click：radio/checkbox 点击可能不触发 change（比如重复点同一项），而 change 只在值真正变化时触发
• 标记功能建议用独立按钮（⚠️），配合一个 marked: Set 存 ID，避免污染表单数据
• 渲染题号状态时，优先读取 DOM 中控件的实际值（el.checked、el.value），而不是维护另一套 JS 状态变量——容易不同步

移动端适配题号栏常见的断裂点

题号横向滚动在手机上极易出问题：文字重叠、点击热区过小、滚动卡顿、iOS Safari 滚动条消失后无法拖拽。

• 横向滚动容器必须设 white-space: nowrap + overflow-x: auto，子项用 display: inline-block 或 display: inline-flex，别用 flex 布局（flex 会换行）
• 题号按钮最小宽度设 min-width: 2.5em，内边距用 padding: 0.4em 0.6em，确保手指能准确点击（iOS 最小推荐热区 44×44px）
• iOS Safari 横向滚动默认禁用惯性，加 -webkit-overflow-scrolling: touch 可恢复；但该属性已废弃，现代方案是用 touch-action: pan-x 配合 passive event listener
• 别在题号栏里放 SVG 或图标字体：部分安卓 WebView 渲染 SVG 会模糊，图标字体加载延迟会导致布局抖动

题号导航看着简单，但滚动同步逻辑、状态持久化、移动端手势响应这三块最容易在联调时暴露问题，建议早期就用真机测试滚动行为和点击反馈。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！