用 data-target 属性绑定 tab 与 panel 的 id，JS 通过 querySelector 定位并切换 active 类，配合 CSS 控制显隐；需清除旧 active 状态、避免重复 ID、按需懒加载内容，并支持键盘操作与 aria 属性。
用原生 HTML + CSS + JavaScript 实现商品详情页选项卡，不需要框架也能稳定切换，关键是把 tab 和 panel 的激活状态绑定对，否则点不动、内容不显、样式错乱都是常见问题。
怎么让点击 tab 标签切换对应内容面板？
核心是「数据关联」：每个 tab 按钮必须明确告诉 JS 它要显示哪个 panel。推荐用 data-target 属性指向面板的 id，比靠索引匹配更健壮（增删 tab 不会错位）。
实操建议：
- 给每个
tab按钮加data-target="#desc"、data-target="#spec"这类属性 - 对应内容区用
id="desc"、id="spec"匹配 - JS 里用
document.querySelector(targetValue)找到目标面板，再切换class="active" - 别用
getElementsByClassName遍历下标——DOM 顺序一变就失效
为什么切换后样式没变或者所有面板都显示？
大概率是 CSS 的显隐控制没写对，或 JS 没清掉上一个 active 状态。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 只加
active类但没写.panel:not(.active) { display: none; }—— 所有面板堆在一起 - JS 只给当前 tab 加
active，但忘了用querySelectorAll(".panel.active").forEach(el => el.classList.remove("active"))清除旧状态 - CSS 用了
visibility: hidden而不是display: none—— 占据空间，页面布局被撑开 - 多个
tab共享同一个id（HTML 不合法），导致querySelector找错元素
商品详情页要不要预加载所有面板内容？
要看内容体积和网络环境。文字型详情、规格参数这类轻量内容，一次性加载没问题；但如果含大图、视频、富文本编辑器输出的 HTML，就得考虑懒加载。
懒加载关键点：
- 初始只渲染第一个
panel，其余用data-src存真实内容 URL 或结构片段 - 监听
tab点击，首次进入时才用fetch加载并插入 DOM，再标记为已加载 - 避免重复请求：加个
data-loaded="true"判断，防止反复点同一 tab 触发多次 fetch - 移动端弱网下，可加 loading 提示，用
aria-busy="true"告诉读屏器正在加载
最易被忽略的是键盘可访问性：商品页常被客服或视障用户使用，tab 按钮必须能用键盘聚焦，按回车/空格触发切换，并用 aria-selected 动态同步状态。这点不加，看似能用，实际在线上验收时容易被退回。
