Chrome 145 Beta 起通过 chrome://flags/#vertical-tabs 启用原生垂直标签页；Edge 91+ 在设置中开启；Firefox 136+ 需修改 about:config 中 browser.tabs.verticaltabs.enabled 为 true。
vertical-tabs 在 Chrome/Edge/Firefox 中怎么开
浏览器原生垂直标签页不是靠 HTML/CSS 实现的，而是 UI 层功能，必须通过对应浏览器的设置或实验性 flag 启用。Chrome 145 Beta 起支持 chrome://flags/#vertical-tabs，开启后重启生效；Edge 91+ 默认在「设置 > 外观 > 标签页」里勾选「垂直标签页」；Firefox 136+ 需手动访问 about:config，将 browser.tabs.verticaltabs.enabled 设为 true。
别试图用 CSS 模拟浏览器级垂直标签栏——它和网页内的垂直标签页是两回事。前者控制整个窗口的标签容器位置，后者只是页面内一个组件布局。
- Chrome 的 vertical-tabs flag 目前仍属实验性，Beta 版才稳定，Stable 版用户需等后续推送
- Edge 开启后标签自动移至左侧，但不会影响网页内部 DOM 结构或 JS 行为
- Firefox 开启后不改变默认顶部标签行为，只新增侧边垂直视图入口（如点击侧边图标切换）
用 flex-direction: column 做网页内垂直标签栏
真正能在 HTML 页面里实现的「垂直标签页」，是指一个固定在左侧/右侧的导航栏 + 右侧/下方内容区的组合结构，核心是用 flex-direction: column 控制按钮堆叠方向，而非靠 <ul></ul> 或浮动模拟。
关键点不是“让它看起来竖着”，而是让标签项具备可点击、可聚焦、可状态反馈、可联动内容区的能力。纯 display: block 的 <li> 不满足这些。
立即学习“前端免费学习笔记（深入）”；
- 容器必须设
display: flex+flex-direction: column，否则column不生效 - 每个标签按钮用
<button type="button"></button>，避免表单提交干扰 - 用
data-tab关联面板，不要依赖 ID 顺序，例如data-tab="step1"对应id="panel-step1" - 侧边栏宽度建议设为固定值（如
width: 240px）或最小约束（min-width: 200px），防止小屏下挤压内容区
切换逻辑该用 hidden 还是 display: none
优先用 hidden 属性控制面板显隐，而不是操作 style.display。前者语义明确、支持 CSS 选择器 [hidden]、且能正确触发媒体资源暂停（比如 <video></video> 在隐藏时停止缓冲）。
但要注意：首次加载时，必须手动移除默认激活面板的 hidden，否则白屏。JS 切换只需两步：document.querySelectorAll('[role="tabpanel"]').forEach(p => p.hidden = true)，再设目标 p.hidden = false。
- 别用
display: none来隐藏含<iframe></iframe>或表单的面板——切走后再切回，iframe 可能重载，input 焦点丢失 - 如果需要过渡动画，
hidden本身不支持，得配合opacity+transition和类名控制 - 无障碍必须同步更新
aria-hidden和tabindex，否则屏幕阅读器无法感知当前活跃面板
带流程状态的垂直标签页怎么加「下一步」按钮
所谓「下一步」不是简单跳转，而是要维护一个当前索引状态，并根据完成情况动态更新标签背景色（如灰色=未开始，黄色=进行中，绿色=已完成）。这需要 JS 记录每步是否通过校验，不能只靠点击顺序推进。
典型结构是给每个标签按钮加 data-step="1"，内容区加 data-step="1"，再用一个全局变量 currentStep = 1 跟踪。点击「下一步」时检查当前步骤是否合法（比如表单验证通过），再递增并更新所有按钮的 class。
- 按钮状态类建议用
step-done/step-active/step-pending，避免和通用active冲突 - 「下一步」按钮本身也要有禁用态：
disabled属性 +opacity: 0.5+pointer-events: none - 移动端需额外处理 touch 事件，避免 click 延迟导致误判
