核心是将用户操作映射到DOM元素：按钮用data-target绑定目标id，select用value匹配id，通过querySelector定位后用classList.toggle("highlight")控制高亮，单选时需先清除所有.highlight类。

用 querySelector + classList.toggle 实现区域高亮

核心不是“监听选择”，而是“把用户操作映射到 DOM 元素上”。比如用户点一个按钮，就给对应 div 加 highlight 类；选中下拉项，就移除旧高亮、加新高亮。

关键在绑定关系：按钮的 data-target 属性值要和目标区域的 id 一致。别硬编码 ID 字符串，用属性驱动更可靠。

• 先写好 CSS：

  .highlight { background-color: #ffeb3b; }

• 按钮或选项带上 data-target="section-1"
• 点击时用 document.querySelector(`#${targetId}`) 找元素，再调 classList.toggle("highlight")
• 如果只允许单个高亮，记得先用 document.querySelectorAll(".highlight") 清掉旧的

下拉菜单（select）触发高亮的典型写法

用户选中 option 后，select 的 value 就是目标 ID。这是最稳定的映射方式，比监听文本内容靠谱得多。

HTML Text Extract

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

下载

• select 的每个 option 的 value 必须等于目标区域的 id（如 value="chart-area"）
• 监听 change 事件，取 e.target.value，而不是 e.target.textContent
• 避免直接操作 style.backgroundColor —— 用 class 控制样式，方便后续改主题或动画
• 若目标区域可能不存在，加一层 if (el) { el.classList.add(...) } 防报错

多个区域同时高亮？小心 classList.toggle 的语义陷阱

toggle 是“有则删、无则加”，适合开关式交互；但如果你希望“点 A 高亮 A、点 B 高亮 B、再点 A 取消 A”，就得自己管理状态，不能全靠 toggle。

• 用 Map 或普通对象记录每个区域当前是否激活，比如 const highlights = new Map(); highlights.set("section-2", true);
• 每次点击后重新计算：遍历所有目标区域，按 map 状态决定调 add 还是 remove
• 别在事件里反复 querySelectorAll(".highlight") 再过滤——DOM 查询开销大，尤其区域多时
• 如果区域是动态生成的（如表格行），确保事件委托到父容器，并从 e.target.dataset.target 取 ID

移动端点击无响应？检查 pointer-events 和层级

高亮本身不会导致失灵，但常见干扰来自 CSS：比如父容器设了 pointer-events: none，或者高亮色块盖住了可点击元素。

• 用浏览器开发者工具检查目标区域是否被其他绝对定位元素遮挡
• 确认高亮类没意外设置 pointer-events: none 或 opacity: 0
• 在 iOS Safari 上，如果高亮区域是空 div 且没设 min-height，可能点不中——加 min-height: 1px 或 padding
• 真遇到 click 延迟，优先换用 touchstart，但注意它不冒泡，得手动处理

实际最难的不是怎么加 class，而是让“用户意图”和“DOM 结构”之间那层映射始终清晰可维护。ID 对不上、class 名拼错、事件绑在错误节点上——这些问题比逻辑本身更容易卡住半天。

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