基础切换仅用 display: none/block 不可行，因编辑器 Tab 需解决状态同步、DOM 复用、URL 可分享、键盘导航和焦点管理五大问题；单纯隐藏会丢失光标、undo 栈与高亮状态。
直接用 <div> + click + display: none/block 就能实现基础切换，但真要落地到编辑器场景，必须解决状态同步、DOM 复用、URL 可分享、键盘导航和焦点管理这五个硬伤。
为什么不能只靠 class 切换显示隐藏
编辑器里的 Tab 不是静态页面切换，它承载着未保存内容、光标位置、语法高亮状态。单纯用 display: none 会让 textarea 或 CodeMirror 实例失焦、销毁 DOM、丢失 undo 栈——下次切回来时编辑器可能白屏或光标归零。
- 用
visibility: hidden或opacity: 0保留 DOM 和焦点链，但需额外处理tabindex和aria-hidden - 真正推荐的是「懒加载 + 持久化容器」：每个 tab 对应一个独立的
<div class="editor-tab" data-tab-id="file-123">，首次激活时才初始化编辑器实例，后续切换只 show/hide 容器，不销毁 - 必须监听
blur和focus事件，在切出前手动保存光标位置（editor.getCursor()）、切回后 restore（editor.setCursor()）
如何让 Tab 切换影响浏览器地址栏
编辑器 Tab 必须支持 URL 路由，否则用户刷新页面就丢工作区。不能用 #tab=editor 这类 hash 路由——PWA 下无法被 Service Worker 缓存，也无法触发安装提示。
- 用
history.pushState({ tabId: 'main.js' }, '', '/edit/main.js')更新 URL，路径必须是合法子路径，不是查询参数 - 监听
popstate事件，从event.state.tabId拿到目标 ID，再调用activateTab('main.js') - 首次加载时别硬编码默认 tab，从
window.location.pathname解析，比如/edit/settings→ 激活 settings tab - 确保所有 tab 内容都由同一份
index.html渲染，否则 PWA 安装会失败
右键菜单和拖拽排序怎么不崩
编辑器 Tab 的右键菜单（关闭、另存为、在新窗口打开）和拖拽排序（重排文件顺序、跨区域拆分）都是高频操作，但极易踩坑。
立即学习“前端免费学习笔记（深入）”；
- 右键菜单必须绑定到每个
<button class="tab-item">上，且第一行写e.preventDefault()；菜单 DOM 挂在document.body下，避免被父容器overflow: hidden截断 - 拖拽排序不能只设
draggable="true"：必须在dragover中调用e.preventDefault()，否则drop永远不触发 - Firefox 对
dataTransfer.getData('text/plain')返回空字符串，改用WeakMap存拖拽源节点：dragStartMap.set(e.target, { id: 'file-123', type: 'editor' }) - 跨容器拖拽（如从主编辑区拖到侧边栏）需统一管理 dropzone，用
e.target.matches('.tab-container[data-accepts="editor"]')做类型校验
编辑器 Tab 最容易被忽略的点是焦点劫持——用户按 Ctrl+Tab 切换标签时，焦点必须落到当前 tab 的编辑器内，而不是卡在 tab 按钮上。这需要手动调用 editor.focus() 并确保 tabindex="-1" 设置正确。否则键盘党根本没法用。
