Tab切换本质是同一DOM区域内div面板的显隐控制，需预置所有面板、用CSS控制可见性、JS更新激活态与ARIA属性，并避免v-if销毁组件。
Tab 切换本质是显隐控制，不是页面跳转
直接用 window.location.href 或 iframe 模拟 Tab 切换，会导致状态丢失、SEO 降权、键盘导航失效。真实 Tab 是同一 DOM 区域内多个 <div> 面板的显示/隐藏切换。
<p>必须提前把所有面板写进 HTML（或 JS 动态生成），靠 CSS 控制可见性，再用 JS 绑定点击事件更新激活态。新手最常漏的是：首次加载不手动激活一个 Tab，结果页面空白。</p>
<ul>
<li>用 <code>display: none 最省性能（完全脱离渲染流），适合纯文本、静态图片等轻量内容
iframe、video 或需保留表单状态的 Tab，改用 visibility: hidden + position: absolute 避免占位空白aria-hidden、tabindex 和 aria-selected，否则屏幕阅读器无法识别当前页签data-tab 是最稳的关联方式，别依赖 DOM 顺序
用 data-tab="profile" 让按钮和对应面板建立语义关联，比靠 querySelectorAll('div')[i] 索引匹配可靠得多——DOM 结构一动，索引就错，调试时很难定位。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div role="tablist"> <button type="button" data-tab="home" aria-controls="panel-home" aria-selected="true">首页</button> <button type="button" data-tab="profile" aria-controls="panel-profile" aria-selected="false">个人资料</button> </div> <div id="panel-home" role="tabpanel" aria-labelledby="tab-home">首页内容</div> <div id="panel-profile" role="tabpanel" aria-labelledby="tab-profile">个人资料</div>
- 外层容器加
role="tablist"，每个按钮设role="tab"和唯一id - 面板用
role="tabpanel"，并通过aria-labelledby指向对应按钮的id - 激活按钮设
tabindex="0"，非激活设tabindex="-1"，支持键盘方向键切换
密集排版要防列宽过窄，column-count 不是万能钥匙
column-count 在移动端容易翻车：设成 3 后，小屏列宽跌破 120px，文字挤成一团，行高错位，打印预览全乱。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
真正可控的做法是优先用 column-width（如 column-width: 16rem），让浏览器自动算列数；再配 column-gap 和 column-rule 防糊：
article {
column-width: 16rem;
column-gap: 1.5rem;
column-rule: 1px solid #eee;
}
- 容器必须是块级元素（
display: block或inline-block），不能是flex/grid/table父级 - 内容高度要足够，或显式设
min-height，否则浏览器可能直接放弃分栏 - 绝对禁止父级设
overflow: hidden，它会裁掉第二列之后所有内容
别在 Vue/React 里用 v-if 或 && 销毁组件
框架中常见错误：用 v-if="activeTab === 'profile'" 或 {activeTab === 'profile' && <profile></profile>} 控制 Tab 显示。这会让组件反复挂载/卸载，表单输入清空、定时器中断、动画重播。
正确做法是保持组件始终挂载，只用 CSS 控制显隐：
<Profile class="tab-panel" :class="{ 'is-hidden': activeTab !== 'profile' }" />
-
is-hidden对应display: none或visibility: hidden，不触发销毁生命周期 - 若需懒加载初始数据，可在组件
mounted或useEffect中加判断：仅当首次进入该 Tab 时请求 - 复杂 Tab（如含图表、编辑器）建议配合
keep-alive（Vue）或useMemo缓存实例
最易被忽略的点：无障碍支持不是“加上就行”，而是每次切换都得同步更新全部 ARIA 属性；密集多列排版时，column-width 比 column-count 更靠谱，但前提是容器没被 flex/grid 父级劫持流式行为。
