HTML标签筛选必须用JavaScript实现，核心是统一用data-category属性绑定按钮与结果项，通过querySelectorAll精准选取、filter逻辑判断，禁用class或id模拟状态；显隐推荐用CSS类（如.category-hidden）而非display:none，以防丢失输入焦点或动态内容状态，并需同步aria-selected、role="tablist"等无障碍属性。
搜索结果页的标签页切换，不是跳转新页面，而是实时筛选同一组结果——核心是用 data-category 绑定按钮与结果项，再用 JS 过滤 DOM 节点并控制显隐。
用 data-category 关联按钮和结果项
每个搜索结果项（如 <article></article> 或 <div class="result">）必须带 <code>data-category 属性，值与对应标签按钮一致；按钮本身也用 data-category 标识，不依赖顺序、ID 或索引。
- 错误写法：
id="tab-news"+document.getElementById('results-news')—— 页面复用时 ID 冲突，且无法支持多组标签共存 - 正确写法：
<button data-category="news">新闻</button>对应<article data-category="news">...</article> - 默认展示所有结果时，初始状态不加任何过滤，所有
data-category项都可见
点击后只显示匹配类别的结果项
切换逻辑分三步：先隐藏全部结果项，再显示目标类别项，最后更新按钮激活态。不能只做“显示”，否则上次残留的项会重叠出现。
- 用
document.querySelectorAll('[data-category]')获取全部结果项，统一设style.display = 'none' - 用
document.querySelectorAll('[data-category="news"]')精准查出当前类别项，设style.display = 'block'（或flex等实际布局所需值） - 避免空值报错：检查
btn.dataset.category是否存在，再执行查询；若无匹配项，保持空白或加提示文案 - 示例片段：
document.querySelectorAll('[data-category-trigger]').forEach(btn => {
btn.addEventListener('click', () => {
const cat = btn.dataset.category;
// 隐藏全部
document.querySelectorAll('[data-category]').forEach(el => el.style.display = 'none');
// 显示目标类别
document.querySelectorAll(`[data-category="${cat}"]`).forEach(el => el.style.display = 'flex');
});
});
为什么不用 display: none 切换就出问题？
搜索结果页常含 iframe、video、表单输入框等动态内容。display: none 会让它们暂停、丢失焦点、清空输入值——用户切回“文档”标签时，刚才填了一半的搜索框可能已变空。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 轻量静态结果（纯文本+图片）：用
display完全没问题，性能好、语义清晰 - 含交互组件的结果（如嵌入地图、评论框、播放器）：改用
visibility: hidden+position: absolute避免占位，同时手动管理aria-hidden="true"和tabindex="-1" - 更稳妥的做法是：用 CSS 类（如
.category-hidden）控制显隐，把样式逻辑收归一处，方便后续加过渡动画或响应式适配
键盘导航和无障碍不能漏
搜索页常被屏幕阅读器用户或键盘党使用，仅靠鼠标点击的标签页等于对这部分用户关闭入口。
- 外层容器加
role="tablist"，每个按钮加role="tab"和tabindex="0"（激活态改为tabindex="-1"） - 结果区域加
role="tabpanel"，并用aria-labelledby指向当前激活按钮的id - 监听
keydown，支持ArrowLeft/ArrowRight切换标签，Enter或Space触发切换 - 别用
<a href="#"></a>模拟按钮——它会触发页面跳到顶部，且没有role="tab"语义
最易忽略的是首次加载状态同步：如果默认选中“全部”类别，但 HTML 中没给对应按钮加 aria-selected="true"，也没让所有结果初始可见，用户一进页面就看到空白——这个细节比动画效果重要得多。
