选项卡 Tabs
选项卡（Tabs）：点击标签切换内容面板，Web 最常见的组件之一。结构：标签栏 + 面板组，JS 点击时给标签和面板同时切 .active，底层内容用 display:none 切换。
面板切换的两种做法：display:none（瞬时、不保留状态）或 active 面板 absolute 叠加（可加过渡动画）；加动画时注意先将新面板 opacity:0 → 1 渐入。
- 标签与面板用 data-tab 属性一一对应
- 点击时先全部清除 active 再给当前项加
- 可用 role="tab"/aria-selected 增强可访问性
HTML
<style> #tabs { max-width: 420px; margin: 20px auto; font-family: sans-serif; } #tabs .heads { display: flex; gap: 4px; border-bottom: 2px solid #f0e6ff; } #tabs .heads button { flex: 1; padding: 10px; border: none; background: none; cursor: pointer; font-size: 14px; color: #888; border-bottom: 2px solid transparent; margin-bottom: -2px; } #tabs .heads button.on { color: #a371f7; border-bottom-color: #a371f7; font-weight: 700; } #tabs .panel { display: none; padding: 16px; background: #faf7ff; border-radius: 0 0 10px 10px; } #tabs .panel.on { display: block; animation: tabIn .3s ease; } @keyframes tabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } } </style> <div id="tabs"> <div class="heads"> <button class="on" data-tab="p1">标签一</button> <button data-tab="p2">标签二</button> <button data-tab="p3">标签三</button> </div> <div class="panel on" id="p1">这是第一个面板的内容</div> <div class="panel" id="p2">第二个面板：切换有淡入动画</div> <div class="panel" id="p3">第三个面板：结构标签栏 + 面板组</div> </div> <script> var tabs = document.getElementById('tabs'); tabs.querySelector('.heads').addEventListener('click', function (e) { var btn = e.target.closest('button'); if (!btn) return; tabs.querySelectorAll('.heads button').forEach(function (b) { b.classList.remove('on'); }); tabs.querySelectorAll('.panel').forEach(function (p) { p.classList.remove('on'); }); btn.classList.add('on'); document.getElementById(btn.dataset.tab).classList.add('on'); }); </script>
本节要点Tabs = data 属性对应 + 统一切 active；面板淡入用 animation tabIn。
