Tab切换核心逻辑是显隐控制与状态同步：点击tab-item时，统一隐藏所有tab-panel并显示对应索引面板，同时仅给当前tab-item添加active类、移除其他项该类，全程不刷新页面或跳转路由。
Tab 切换的核心逻辑是什么？
Tab 切换本质是「显隐控制」+「状态同步」，不是靠刷新页面，也不是靠跳转路由。关键在于：点击某个 tab-item 时，隐藏所有 tab-panel，再显示对应索引的面板；同时给当前 tab-item 加上 active 类，移除其他项的该类。
- 不要用
display: none硬切再用visibility: hidden混用，统一用display或统一用hidden属性更可控 - 别直接操作
innerHTML重绘整个 tab 区域，性能差且易丢事件绑定 - 原生 JS 中，
document.querySelector('.tab-item[data-index="1"]')比getElementsByClassName更准，后者返回 HTMLCollection 容易因 DOM 变动导致索引错位
用原生 JavaScript 实现最简可用版本
以下代码可直接贴进 index.html 的 <script></script> 标签内运行，无需框架：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<div class="tabs">
<button class="tab-item active" data-index="0">首页</button>
<button class="tab-item" data-index="1">关于</button>
<button class="tab-item" data-index="2">联系</button>
</div>
<p><div class="tab-panels">
<div class="tab-panel" data-index="0">这是首页内容</div>
<div class="tab-panel hidden" data-index="1">这是关于内容</div>
<div class="tab-panel hidden" data-index="2">这是联系内容</div>
</div></p><p><script>
document.querySelectorAll('.tab-item').forEach(item => {
item.addEventListener('click', () => {
const index = item.dataset.index;</p><pre class="brush:php;toolbar:false;"> // 清空所有 active
document.querySelectorAll('.tab-item').forEach(i => i.classList.remove('active'));
item.classList.add('active');
// 隐藏所有 panel，显示目标 panel
document.querySelectorAll('.tab-panel').forEach(p => p.classList.add('hidden'));
document.querySelector(`.tab-panel[data-index="${index}"]`).classList.remove('hidden');
});});
-
.hidden需在 CSS 中定义为display: none，不能只写visibility: hidden（否则仍占布局空间） -
data-index是最稳妥的关联方式，比靠 DOM 顺序（如itemIndex）或文本内容匹配更可靠 - 如果 tab 数量动态生成（比如从 JSON 渲染），确保每个
data-index是字符串类型，和querySelector中拼接的值一致
为什么用 hidden 属性比 class 切换更干净？
HTML5 原生 hidden 属性语义明确、浏览器兼容性好（IE11+），且自带样式规则：[hidden] { display: none !important; }。直接操作属性更少出错：
-
el.hidden = true和el.hidden = false比el.classList.toggle('hidden')少一层抽象 - 不会和其他 class 名冲突（比如你 CSS 里写了
.hidden { opacity: 0 }，那 class 方式就失效了） - 但注意：不要混用 —— 如果用了
hidden属性，就别再给同个元素加display: none的 class，否则调试时容易误判来源
常见报错和卡点
-
Cannot read property 'classList' of null：说明 document.querySelector(...) 没找到元素，检查 data-index 值是否拼写错误、是否多空格、是否大小写不一致
- 点击无反应：确认
script 在 DOM 渲染后执行（放在
Cannot read property 'classList' of null：说明 document.querySelector(...) 没找到元素，检查 data-index 值是否拼写错误、是否多空格、是否大小写不一致 script 在 DOM 渲染后执行（放在 
