应使用 aria-current="page" 标记生效的筛选项，并同步URL参数、内存状态与DOM属性，确保四者一致；多选时用扁平对象管理状态并动态生成去重标签。
怎么让已选筛选项在HTML里“看得见”
用户点了筛选条件，页面刷新或局部更新后，得让用户一眼看出“我刚选了啥”。这不是靠CSS随便加个背景色就行，关键在结构语义和状态同步。
最稳妥的做法是：用 aria-current="page" 标记当前激活项，同时配合 class 控制样式。它比单纯靠 class="active" 更可靠——尤其在服务端渲染或 SSR 场景下，避免 JS 未执行时样式丢失。
- 只对真实生效的筛选项加
aria-current="page"，比如点击“价格：100-500”后，对应按钮或标签才加 - 不要给所有可点击项预设该属性，否则会误导屏幕阅读器
- 搭配 CSS 时，优先用
[aria-current="page"]选择器，而非.active，减少样式耦合
URL参数和DOM状态不一致怎么办
常见现象：用户手动改了URL里的 category=shoes，但页面上的筛选标签没高亮；或者点了标签，URL没变，刷新后状态丢失。根本原因是前端没把URL参数映射到UI状态。
必须在初始化和路由变化时做两件事：解析URL参数 → 同步到对应筛选标签的属性和样式。
立即学习“前端免费学习笔记（深入）”；
- 用
new URL(window.location)取参数，别依赖location.search字符串手撕 - 每个筛选项要有唯一、稳定的
data-param-key和data-param-value，比如<button data-param-key="brand" data-param-value="nike"> - 匹配时注意值的编码，
decodeURIComponent必须做，否则中文或特殊字符会失配
多选筛选下，“已选”标签怎么动态生成
单选场景（如分类）只需高亮一个；但价格区间、多品牌、多规格这类多选，得把已选项聚合成可读标签，还得支持删除。核心不是“怎么渲染”，而是“怎么管理状态源头”。
推荐用一个扁平对象存所有筛选值：{ brand: ["nike", "adidas"], price: "100-500" }，再由它驱动UI。
- 每次添加/删除筛选项，先更新这个对象，再触发重新渲染（哪怕只是增删DOM节点）
- 生成标签时，用
Array.from(new Set(values))去重，防止用户反复点同一项导致重复 - 删除标签的按钮必须带
data-param-key和data-param-value，方便精准移除对应值 - 空状态要显式处理——当某个 key 的值为空数组或 undefined 时，对应筛选区应隐藏或置灰
为什么用 aria-current 而不用 aria-selected
aria-selected="true" 是给可切换的选项用的（比如表格行、网格项），而筛选标签本质是“当前生效的状态”，不是“被选中的候选”。用错会导致辅助技术误读为“还有其他可选但未选的同类项”。
更实际的问题是兼容性：aria-current 在主流屏幕阅读器中对“当前页/当前筛选”的播报更一致；aria-selected 在按钮类元素上部分读屏器会静默忽略。
- 按钮型筛选项（
<button>）必须用aria-current，不是aria-selected - 如果筛选项是
<input type="checkbox">，那该用checked属性，而不是任何 aria-* - 服务端渲染时，直接在HTML里输出
aria-current="page"，别等JS补——这是SEO和首屏可访问性的底线
