不能用 window.location.href 切换仪表盘标签页，因其会整页刷新，导致白屏、滚动丢失、Canvas重绘中断、表单清空、定时器终止；真实切换须保留在同一HTML内，仅通过DOM显隐或transform控制，不触发导航。
为什么不能用 window.location.href 切换仪表盘标签页
因为会整页刷新：白屏、滚动位置丢失、Canvas 图表重绘中断、表单输入清空、setInterval 全部被杀。仪表盘里那些实时更新的温度曲线、转速指针、倒车摄像头流，全得重新初始化——用户看到的就是卡顿+跳变。
真实切换必须保留在同一 HTML 内，只操作 DOM 显隐或 transform 位移，不触发 navigation。
- 所有 tab 面板提前写在 HTML 中（或由 JS 动态插入），用
display: none或hidden初始隐藏 - 切换时统一设其他面板
aria-hidden="true"，目标面板设aria-hidden="false" - 按钮必须带
role="tab"、tabindex="0"，激活态加aria-selected="true" - 外层容器加
role="tablist"，否则键盘用户按 Tab 键直接跳过整个标签栏
data-tab 和 data-tab-panel 怎么配对才不翻车
靠 ID 关联是开发初期最常踩的坑：页面里插两个仪表盘组件，id="temp-panel" 冲突，第二个就切不动。用 data- 属性语义化绑定才是可复用方案。
- 按钮写
- 对应面板写 ...
- JS 里用
document.querySelectorAll('[data-tab-panel="' + target + '"]')查找，大小写、空格、引号都要严格一致 - 别混用：
data-tab="temperature"和id="temp-panel"同时存在，逻辑分支容易漏判
含 Canvas / 视频流的 tab 切换怎么避免残留和卡顿
单纯显隐不够：Canvas 不清空会叠加旧帧， 在 display: none 下可能暂停但缓冲未释放，再显示时有黑屏或音画不同步。
- 切换前先调
ctx.clearRect(0, 0, canvas.width, canvas.height)，再重绘当前数据 - 视频流 tab 激活时检查
video.readyState ，手动video.play()；失活时video.pause() - 避免用
display: none控制含媒体的面板——改用visibility: hidden+position: absolute占位，防止重排抖动 - 每个 tab 的定时器（如每秒 fetch 温度）必须独立管理：切换出时
clearInterval(id)，切换入时重启
树莓派类轻量前端怎么做到无 JS 循环切换
资源受限设备上，JS 解析和执行延迟明显。 + :checked 是唯一零 JS、真静态、能闭环的方案，但结构容错率极低。
- 所有 radio 必须同名：
- 最后一个 tab 的 label 后，手动加一个
实现视觉循环 - CSS 用
input#tab1:checked ~ .tab-content:nth-of-type(1) { display: block; }控制显隐 - 缺点很实在：无法监听切换事件、不支持 URL hash、移动端点击热区不足 44×44px 时大概率点不中
实际部署时最容易被忽略的是 iframe 方案里的 onload 时机——关闭按钮必须等 iframe.onload 触发后才启用，否则 contentWindow 为 null，postMessage 直接报错；而这个事件在树莓派 Chromium 上可能比桌面端慢 300ms 以上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
