如何用HTML代码给虚拟列表绑定激活项-html教程-PHP中文网

虚拟列表中让 active 类名只加在当前选中项上的核心是：用 state（如 activeindex）记录逻辑索引，渲染时比对 item.index === activeindex 动态添加 class，并配合唯一 key（如 item.id）、aria-current="true" 和 tabindex 实现可访问性与状态同步。

如何用html代码给虚拟列表绑定激活项

虚拟列表里怎么让 `active` 类名只加在当前选中项上？

虚拟列表本身不渲染全部 DOM，所以不能靠遍历所有 <li> 手动加 class。关键在于：激活状态必须和滚动位置、数据索引联动，而不是依赖 DOM 是否存在。

用一个变量（比如 activeIndex）记录当前激活的逻辑索引，不是 DOM 位置
在渲染每一项时，判断 item.index === activeIndex，再决定是否加 class="active"
不要在 onScroll 里反复查 offsetTop 或 getBoundingClientRect——虚拟列表的 item 高度通常是固定的，直接用 Math.floor(scrollTop / itemHeight) 算出可视区起始索引，再结合渲染范围推导“可能被激活的候选索引”

`IntersectionObserver` 能不能用来自动激活？

不能直接用。因为虚拟列表里大量 item 是空占位（<div></div>），没有真实内容节点，IntersectionObserver 监听不到；即使监听了，它只告诉你“是否进入视口”，不解决“用户点了哪一项”或“键盘导航聚焦到哪一项”的问题。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

如果只是想高亮当前滚动到顶部的项，可以用 IntersectionObserver + threshold: [0]，但需确保每个 item 有唯一 id 和真实 DOM 节点（意味着放弃纯占位渲染）
更稳妥的做法是：把激活逻辑交给业务层——点击时设 activeIndex，键盘导航时用 ArrowUp/Down 更新 activeIndex，滚动时不做自动激活
注意：若开启平滑滚动（scrollBehavior: 'smooth'），scrollTop 变化是非即时的，别在 scroll 事件里直接读取它来更新激活项

React/Vue 里怎么避免激活态重置？

常见坑是：滚动后重新渲染，但 activeIndex 没同步进依赖数组，导致视图没更新；或者用了 key 基于 index 生成，但数据排序变化后 key 错位，激活项“粘”在错误位置。

React 中，确保 activeIndex 是 state，并在 item 渲染时参与 className 计算：className={`item ${index === activeIndex ? 'active' : ''}`}
Vue 中，避免用 :key="index"，改用唯一 ID（如 :key="item.id"），否则排序/过滤后激活态会错乱
如果支持多端（比如 SSR），注意服务端首次渲染时 activeIndex 必须与客户端一致，否则 hydration mismatch

为什么用 `aria-current="true"` 比只靠 CSS class 更重要？

屏幕阅读器不会读 class="active"，但会播报 aria-current。可访问性不是加分项，是底线。

每个渲染项加上：aria-current={index === activeIndex ? 'true' : undefined}
别只写 aria-current="page" 或 "step"——虚拟列表里的激活是“当前选中项”，语义上就是 "true"
配合 tabindex="0" 让非按钮类元素可聚焦，再用 useEffect 或 mounted 把焦点移到激活项（注意：仅在用户主动操作后聚焦，别在滚动时强制 focus，会打断屏幕阅读器流）

实际最难的部分不是绑定 class，而是定义“谁有权决定激活态”——是点击？键盘？URL hash？还是滚动停稳后自动匹配？这个决策一旦定错，后面所有 DOM 同步、焦点管理、服务端一致性都会连锁出问题。