零基础应先实现button控制div显隐的最小闭环：用data-target声明目标，JS仅监听点击、查找元素、切换active类；需处理初始状态、校验目标存在性、用CSS类而非内联样式控制显隐；键盘支持需手动聚焦和设置button type="button"。
零基础也能做出来，但别从“炫酷动画”或“框架插件”开始——先跑通 button 控制 div 显隐这个最小闭环，否则后面所有“美化”“状态同步”“键盘支持”都会卡在第一步。
怎么让按钮点一下就显示对应内容
核心不是写 JS，而是让按钮和内容块之间有明确的“谁管谁”关系。最稳的方式是用 data-target 属性声明目标：
<button data-target="#tab-1">首页</button><div id="tab-1" class="tab-content">这里是首页内容</div>
JS 里只做三件事：监听点击 → 找到 btn.dataset.target 对应的元素 → 把所有 .tab-content 设为隐藏，再把目标设为显示。别用 getElementById 硬写 ID，万一改名就得同步改 JS；也别靠 DOM 顺序（比如第几个 div）匹配，容易错位。
为什么点完按钮内容没变或全空白
常见原因就两个：初始状态没处理，或者目标元素根本没找到。
立即学习“前端免费学习笔记（深入）”；
- 首次加载时，必须手动让默认 tab 的内容可见——比如给第一个
.tab-content加class="active"，CSS 写.tab-content:not(.active) { display: none; } - JS 查找目标前，先判断
btn.dataset.target是否为空，再用document.querySelector(btn.dataset.target)获取元素；如果返回null，说明 ID 写错了或没加#，直接跳过，别让脚本崩掉 - 别用
style.display = 'none'直接写内联样式——JS 一旦出错或没加载，页面就全白；统一用 CSS 类控制显隐，JS 只负责开关类名
怎么让键盘用户也能操作
鼠标点完，Tab 键还在原地？这不是 bug，是你没手动把焦点移过去。
- 每次点击按钮后，立刻执行
btn.focus()，确保键盘用户能继续按 Tab 导航 - 如果目标面板里有输入框、按钮等可聚焦元素，切换后应该把焦点移到第一个可聚焦项上（比如
targetPanel.querySelector('input, button, [href]')?.focus()），而不是留在 tab 按钮上 - 别用
autofocus——它只在页面加载时生效，切换时不会触发 - 按钮必须是
<button type="button">，不是<div>或<a>，否则空格/回车键无法触发
能不能不用 JS 实现切换
能，但只适合静态内容、不关心 URL 分享、也不需要键盘支持的场景。
-
:target方案：给每个内容块设id，标签用<a href="#tab-1">，CSS 写.tab-content:target { display: block; }，其他默认display: none - 缺点明显：无法同步按钮高亮状态（
a:target不管链接本身）、不支持过渡动画、刷新后状态靠 URL hash 决定、读屏器读不出当前选中项 - radio 方案更可控：用
<input type="radio">配合:checked + label和兄弟选择器~控制显隐，能加动画，但结构固定、无法监听切换事件、移动端体验弱
真正上线的项目，别为了“省几行 JS”牺牲可访问性和维护性——10 行健壮的 JS，比 50 行脆弱的纯 CSS 更可靠。
