滑动切换页面容器
滑动切换的底层原理：一个容器内多个等宽面板横向排列，通过改变容器 transform 展示不同面板——轮播、 Tabs 滑动版、移动端整屏切换（引导页）都是同一套。
Tabs 滑动版：标签栏也跟着 underline 滑动指示（translateX = index × 标签宽）；面板区放一个 flex 容器整体平移，体验比直接 display 切换更“流动”。
- 面板容器 flex 排列，整体 translateX 平移
- 标签下划线同步平移（定位在同一动画时长内）
- 切换时 transition 统一 .35s 保证视觉同步
HTML
<style> #stab { max-width: 420px; margin: 20px auto; overflow: hidden; } #stab .heads { position: relative; display: flex; } #stab .heads button { flex: 1; padding: 10px; border: none; background: none; cursor: pointer; font-size: 14px; color: #888; } #stab .line { position: absolute; bottom: 0; width: 33.33%; height: 3px; background: #4a9eff; transition: transform .35s ease; } #stab .vp { overflow: hidden; } #stab .track { display: flex; transition: transform .35s ease; } #stab .panel { min-width: 100%; padding: 20px; box-sizing: border-box; background: #f4f8ff; color: #333; font-size: 14px; } </style> <div id="stab"> <div class="heads"> <button data-i="0">第一页</button><button data-i="1">第二页</button><button data-i="2">第三页</button> <span class="line"></span> </div> <div class="vp"><div class="track"> <div class="panel">滑动面板 A —— 下划线跟着走</div> <div class="panel">滑动面板 B —— 内容区也整体平移</div> <div class="panel">滑动面板 C —— 轮播同款结构</div> </div></div> </div> <script> var box = document.getElementById('stab'); var line = box.querySelector('.line'), track = box.querySelector('.track'); box.querySelector('.heads').addEventListener('click', function (e) { var b = e.target.closest('button'); if (!b) return; var i = +b.dataset.i; line.style.transform = 'translateX(' + (i * 100) + '%)'; track.style.transform = 'translateX(' + (-i * 100) + '%)'; }); </script>
本节要点滑动切换 = 容器整体平移；标签下划线与面板共用同一时长，视觉同步。
