HTML怎么动态高亮树形菜单的激活节点-html教程-PHP中文网

树形菜单需动态高亮：根据URL路径或点击事件匹配data-id，为当前节点加is-active，并向上冒泡为父节点加is-expanded和is-open；滚动时节流检测可视节点并同步展开父链，确保状态一致。

html怎么动态高亮树形菜单的激活节点

树形菜单的“激活节点”高亮不能靠静态 class="active" 硬写，必须结合当前上下文（如 URL 路径、点击行为或滚动位置）动态判断并更新 DOM —— 否则用户点开子项、跳转到某节点页面后，高亮会丢失或错位。

适用于单页应用或服务端渲染的菜单页，目标是：访问 /products/category/34 时，自动高亮 ID 为 "34" 的树节点（含父级展开）。

提取 URL 中的关键标识（如路径最后一段、查询参数 id=34），用 new URL(window.location.href).pathname 或 URLSearchParams 解析
遍历所有树节点（建议用 document.querySelectorAll('li[data-id]')，避免依赖 class 名混乱）
匹配成功后，不仅给该节点加 is-active 类，还要向上冒泡，给所有父
加 is-expanded 类，并确保其子显示（classList.add('is-open')）
注意：不要直接操作 style.display，保持与展开/折叠逻辑共用同一套 class 控制流，避免状态冲突

用户点击某个叶子节点（如“Webpack”），不仅要高亮它，还要确保“前端工具”父节点已展开、且自身处于可视区域顶部。

HTML Text Extract

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

下载

事件监听必须委托到树容器（如 #tree-menu），用 e.target.closest('li[data-id]') 捕获点击节点
用 closest('li') 向上逐层找父
，对每个父节点调用 expandNode()（内部设 aria-expanded="true" + classList.add('is-open')）
高亮只作用于最终点击的节点（li[data-id="123"]），移除之前所有 is-active，再加到当前节点
可选增强：调用 scrollIntoView({ block: 'nearest', behavior: 'smooth' }) 让节点滚动到视口可见区

适合长树形结构（如文档大纲、API 分类），用户滚动时自动标记“当前阅读位置”对应的节点。

监听 scroll，但要用 throttle（如 100ms 间隔）防卡顿
遍历所有带 data-id 的
，用 el.getBoundingClientRect().top 判断是否在视口内（top -100）
取最后一个满足条件的节点（避免顶部多个节点同时触发），高亮它；若无匹配，则清空所有 is-active
注意：树节点若被 max-height: 0 折叠，getBoundingClientRect() 仍返回 0 值，需先确保父链已展开，或改用 offsetTop + window.scrollY 计算