无缝标签页需避免整页刷新，可用CSS+radio实现静态切换或JS+requestAnimationFrame实现平滑动画，并配合fetch动态加载内容及全局数据采集。
直接用 setInterval 调用 location.reload() 或 <meta http-equiv="refresh"> 切换标签页，不是“无缝”，而是整页闪退重载——用户会看到白屏、滚动位置丢失、表单清空。真要无缝，必须绕过页面刷新，靠 DOM 局部更新或 CSS/JS 控制显隐。
用 CSS + :checked 实现纯 HTML/CSS 标签页循环
不需要 JS，适合静态仪表盘或资源受限环境（如树莓派轻量前端）。核心是用 <input type="radio"> 控制状态，配合 ~ 和 + 选择器联动内容面板。
- 每个
<input>对应一个 tab，name必须相同，确保单选互斥 - 用
<label for="tab1">绑定点击区域，避免直接操作 input - 内容区用
<div class="tab-content">，通过input#tab1:checked ~ .tab-content:nth-of-type(1)控制显示 - 循环切换靠 radio 的
checked状态自动迁移，但需手动写“下一个”逻辑：在最后一个 tab 的 label 后加一个指向第一个 tab 的<label for="tab1">，视觉上形成闭环
缺点：无法监听切换事件、不支持 URL hash 同步、移动端 touch 响应可能延迟。
用 JavaScript + requestAnimationFrame 平滑切换动画
当仪表盘有指针、进度条、Canvas 图表时，硬切 tab 会导致动画中断或跳帧。此时不能只控制显隐，得让切换过程本身可插值。
立即学习“前端免费学习笔记（深入）”；
- 给每个 tab panel 加
transform: translateX(100%)（初始偏移），激活时用transform: translateX(0) - 切换时用
element.animate()或 requestAnimationFrame 驱动 transform 变化，比opacity更性能友好 - 关键点：在动画 start 前先
display: block，结束后再清理transform，避免影响后续 Canvas 绘制坐标系 - 若用 Canvas 渲染仪表（如
arc()绘制的转速表），切换 tab 时记得调用ctx.clearRect()再重绘，否则残留图像会叠加
用 fetch() + innerHTML 动态加载内容避免白屏
树莓派仪表盘常需从本地 API（如 /api/sensors）拉取温度、倒车状态等数据。如果每个 tab 页面都预加载全部数据，内存和首屏时间会飙升。
- 每个 tab 的内容区留空：
<div id="tab-2-content" class="tab-content"></div> - 点击 tab 时触发
fetch('/api/temperature')，成功后把返回的 HTML 片段塞进对应容器：document.getElementById('tab-2-content').innerHTML = data - 务必在 fetch 前加 loading 状态（如
classList.add('loading')），并在catch中显式报错，否则传感器断连时 tab 会变空白且无提示 - 注意：动态插入的 HTML 中的
<script>不会执行，如需初始化 Canvas，得在 fetch 回调里手动调用initGauge(ctx)
真正难的不是“怎么切”，而是切的时候仪表盘底层数据是否还在持续采集。比如倒车模式下切到电池页，sensors.get_reverse_status() 还在轮询吗？这个逻辑如果写在某个 tab 的 JS 里，一隐藏就停了——得把数据采集提到全局，tab 只负责展示。
