基础切换仅用 display: none/block 不可行，因编辑器 tab 需解决状态同步、dom 复用、url 可分享、键盘导航和焦点管理五大问题；单纯隐藏会丢失光标、undo 栈与高亮状态。

直接用 <div> + <code>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 容器，不销毁 <li>必须监听 <code>blur 和 focus 事件，在切出前手动保存光标位置（editor.getCursor()）、切回后 restore（editor.setCursor()）

如何让 Tab 切换影响浏览器地址栏

编辑器 Tab 必须支持 URL 路由，否则用户刷新页面就丢工作区。不能用 #tab=editor 这类 hash 路由——PWA 下无法被 Service Worker 缓存，也无法触发安装提示。


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载
• 用 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"></button> 上，且第一行写 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" 设置正确。否则键盘党根本没法用。