原生HTML+CSS可实现语义化筛选标签组，但需少量JS处理交互：用<button>和aria-pressed控制状态，data-*标记分类，hidden属性控制显隐，支持单选/多选及重置功能。
怎么用原生 HTML + CSS 实现可点击筛选的标签组
纯 HTML 本身不支持交互，所谓“筛选标签组”必须配合少量 JavaScript 才能响应点击、切换状态、过滤内容。但结构和样式完全可以由 HTML + CSS 承担，且要尽量保持语义清晰、无障碍可用。
关键做法是：用 <button> 而非 <div> 或 <span> 包裹标签文字，确保键盘可聚焦、屏幕阅读器可识别；用 aria-pressed 标记当前激活状态；CSS 通过 [aria-pressed="true"] 控制视觉反馈。
- 不要用
<a href="#">模拟按钮——它会触发页面跳转或滚动，且语义错误 - 避免给每个标签单独写
onclick内联事件——不利于维护，也难做统一状态管理 - 如果筛选目标是同页的 DOM 元素（比如一组
<article>），优先用data-*属性标记分类，例如data-category="react"
JavaScript 怎么绑定点击并过滤 DOM 元素
核心逻辑就三步：监听按钮点击 → 获取当前标签的筛选值 → 遍历目标元素，按 data- 属性匹配显示/隐藏。不需要框架，querySelectorAll 和 classList.toggle 就够用。
示例场景：点击 <button data-filter="js">JavaScript</button>，只显示 data-tag="js" 的卡片：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('[data-filter]').forEach(btn => {
btn.addEventListener('click', () => {
const filterVal = btn.dataset.filter;
document.querySelectorAll('.card').forEach(card => {
const cardTag = card.dataset.tag;
card.hidden = filterVal !== cardTag && filterVal !== 'all';
});
});
});- 用
hidden属性而非display: none—— 更语义化，且自动被屏幕阅读器忽略 - 务必预留
data-filter="all"按钮，用于重置筛选，否则用户无法恢复全部内容 - 如果目标元素数量大（>200），直接操作
hidden仍很高效；若需动画，改用classList+ CSS 过渡更稳妥
多选筛选（比如同时选 “React” 和 “TypeScript”）怎么处理
单选靠一个变量存当前值，多选就得用数组存已选值，并把匹配逻辑从「等于」改成「包含」。难点不在 JS，而在 UI 状态同步：按钮按下后要立刻更新视觉，且不能和其他筛选冲突。
- 每次点击，先用
toggle()切换该按钮的aria-pressed状态，再重新计算整个数组 - 匹配时用
Array.includes()判断：cardTags.split(' ').some(t => selectedTags.includes(t))，其中cardTags可是空格分隔的字符串（如data-tags="react ts hooks"） - 别用
checkbox+label组合来实现——虽然语义对，但默认样式难统一，且移动端点按反馈弱；button+aria-pressed更可控
为什么不用现成的库（比如 Select2、Tagify）
这些库适合表单中输入+建议场景，不是为“筛选导航栏”设计的。它们往往自带下拉、搜索、远程加载，反而增加体积、干扰语义、覆盖默认焦点行为。
真实项目里，轻量筛选标签组最常踩的坑是：
- 没处理空筛选结果——页面留白却不提示“暂无匹配”，用户以为卡了
- 没加防抖或节流——当筛选触发重排版+重绘频繁时（比如瀑布流卡片），快速连点会导致视觉闪烁或卡顿
- 服务端渲染（SSR）时没同步初始状态——JS 加载前标签全是未激活态，首屏体验割裂
真正复杂的点从来不在“怎么让标签变色”，而在于状态如何与数据源对齐、错误边界是否兜住、以及用户中途取消筛选时能否自然回退。
