HTML本身不支持标签筛选，必须用JavaScript实现；核心是用data-*属性（如data-category）绑定语义，通过querySelectorAll()精准选取、filter()逻辑判断，禁用class模拟状态以防语义污染、误匹配和维护困难。
HTML 本身不支持标签筛选，所有“点击标签 → 过滤内容”的行为都必须靠 JavaScript 实现；核心是用 data-* 属性绑定语义、querySelectorAll() 精准选取、filter() 做逻辑判断，别用 class 模拟状态。
为什么不能用 class 做筛选依据
很多人给内容元素写 class="tag-react tag-vue"，再用 document.querySelectorAll(".tag-react") 拿数据——这会直接导致三类问题：
- class 名膨胀难维护：一个元素多个标签，class 列表越堆越长
- 语义污染：
class本该管样式，现在被迫承载业务逻辑，CSS 和 JS 相互干扰 - 误匹配风险：
.tag-react会命中class="tag-reactive"这种意外字符串，查不到也报错不了
正确做法是只用 data-category="react" 这类属性，值小写、无空格、无符号，筛选时写 document.querySelectorAll('[data-category="react"]')，精准、可读、零歧义。
多选标签怎么存状态、怎么判断匹配
用户点了「React」又点「Vue」，你要显示所有属于任一标签的内容。别写死 if (cat === "react" || cat === "vue")——这种代码没法加第三个标签，也不适配后端动态返回的分类名。
- 用
Set存已激活标签：const selected = new Set(); selected.add("react"); selected.add("vue"); - 遍历所有待筛选节点时，统一检查：
selected.has(item.dataset.category) - 注意
dataset.category是小写的，且item.dataset.category可能为undefined，需做空值防护 - 如果要“与”逻辑（同时满足多个），改用
Array.from(selected).every(key => item.dataset.category === key)
点击标签后怎么批量显隐内容
别在循环里反复调用 style.display = "none" 或 classList.toggle()——这会触发多次重排，卡顿明显。
- 默认所有待筛选元素设
style.display = "none"（CSS 初始化或 JS 一次性设置） - 点击时用
document.querySelectorAll('[data-category="react"]')拿到全部匹配节点 - 遍历结果，对每个节点设
node.style.display = "block"（或你设定的显示值） - 事件委托更安全：
e.target.closest('[data-category]')防止点到内部span或图标取不到值
怎么同步 URL 和高亮当前已选标签
刷新页面后筛选状态丢失，本质是没把状态落进 URL 或 localStorage。但同步不是简单拼 query string，关键在状态源头管理：
- 用一个扁平对象存所有筛选值：
{ category: ["react", "vue"], status: "active" } - 每次点击先更新这个对象，再触发 DOM 更新和 URL 重写：
history.replaceState(null, "", `?category=react&category=vue&status=active`) - 高亮已选标签不要靠 class 切换，用
aria-current="true"（不是aria-selected）——它表示“当前生效的状态”，不是“可选但未选的候选” - URL 解析时注意重复参数：
new URLSearchParams(location.search).getAll("category")才能拿到所有category值
最常被忽略的是 dataset 值与用户输入/URL 参数的大小写和空格一致性——哪怕一个全角空格，=== 就失效。清洗必须统一做：value.trim().replace(/[\s\uFEFF\xA0]+/g, " ")。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
