不能。纯HTML无交互能力，tab切换必须依赖JavaScript驱动状态与显隐控制，所谓“HTML实现”实为HTML结构、CSS样式与JS逻辑三者缺一不可的协同配合。
tab切换用原生HTML+CSS能实现吗？
不能。纯HTML没有交互能力，tab切换必须靠JavaScript驱动状态、控制显隐。所谓“HTML实现”实际是「HTML结构 + CSS样式 + JS逻辑」三者配合，缺一不可。常见误区是只写一堆<div>和<button>就以为完成了，结果点不动、不切换、样式错乱。
怎么用addEventListener绑定tab按钮点击事件？
核心是给每个tab按钮加统一类名（比如tab-btn），再用事件委托或遍历绑定。别直接在onclick属性里写JS——难维护、无法复用、调试困难。
- 推荐用
document.querySelectorAll('.tab-btn')获取全部按钮，再.forEach()绑定click事件 - 点击时，先用
event.target.dataset.tab读取按钮上预设的data-tab="desc"这类标识，对应内容区的id - 务必在切换前移除所有
.active类，再给当前按钮和对应内容区添加——否则多个tab同时高亮 - 避免用
innerHTML重绘整个tab区域，会丢失已绑定的事件或输入框焦点
为什么切换后图片/视频不加载或错位？
因为被display: none隐藏的元素，其内部的<img>、<video>等资源可能未触发加载，或CSS尺寸计算异常。这不是JS bug，是渲染机制问题。
- 不要仅靠
display: none控制显隐——对媒体资源多的tab，改用visibility: hidden; height: 0; overflow: hidden;组合，保持DOM流和尺寸上下文 - 图片懒加载需手动触发：
tabContent.querySelector('img[data-src]').src = img.dataset.src，并在切换后调用img.onload回调更新布局 - 含
iframe（如视频嵌入）的tab，切换到该tab时再动态设置src，切走时设为空字符串释放资源 - 使用
getBoundingClientRect()检查内容区高度是否为0，确认CSS是否意外清除了高度
移动端tab切换卡顿或点不中怎么办？
本质是触摸事件响应延迟和点击穿透。iOS Safari默认有300ms延迟，安卓部分浏览器会把click误判为滑动。
立即学习“前端免费学习笔记（深入）”；
- 加
<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则缩放会导致坐标偏移 - 用
touchstart替代click事件，但要防重复触发：加event.preventDefault()并记录timestamp做节流 - 按钮区域至少
44px × 44px，小屏下用min-height和padding保证可触面积 - 禁用
-webkit-tap-highlight-color: transparent，否则用户没反馈感，以为没点中
