html标签页无内置上下切换行为，需用css垂直布局（flex-direction: column）+ js控制hidden属性切换内容+transform translatey实现y轴动画，兼顾可访问性与资源管理。
HTML 标签页本身没有“上下切换”或“垂直滑动”的内置行为——所谓“上下切换”，实际是指 垂直布局的标签导航 + 内容区上下方向切换动画，而不是靠浏览器滚动或 touchmove 实现的滑动。真要做出上下方向的内容切换效果（比如淡入/滑入/缩放），必须靠 CSS 动画 + JS 控制显隐状态，且需明确区分“布局方向”和“切换动效”两个层面。
vertical tabs 布局用 flex-direction: column
垂直标签页的视觉结构靠 CSS 实现，不是 HTML 标签决定的。核心是让标签菜单纵向排列，内容区紧随其后或并排：
- 容器设
display: flex且flex-direction: column，标签按钮用<button type="button"></button>（防表单提交） - 每个按钮加
data-tab="step1"，对应面板用data-tab-panel="step1"，避免 id 冲突 - 别用
<ul><li></ul>模拟垂直菜单——它只是文档流堆叠，不构成语义化 tablist，无障碍支持差 - 按钮之间用
border-bottom或margin-bottom分隔，激活态用background-color或border-left: 3px solid #007bff突出
content 切换用 hidden 而非 display: none
如果内容区含 <video></video>、<iframe></iframe> 或需要保持焦点的 <input>，“上下切换”时直接切 display 会中断资源、清空输入值。更稳妥的是用 hidden 属性：
- 初始状态：所有面板加
hidden，默认第一个移除该属性 - JS 切换逻辑只做两件事：
document.querySelectorAll('[role="tabpanel"]').forEach(p => p.hidden = true)，再document.querySelector(`#panel-${tab}`).hidden = false -
hidden是原生语义属性，自动暂停媒体、释放 iframe、重置焦点管理，比display: none更可靠 - CSS 中可用
[hidden] { display: none; }统一控制，也可配合transition: opacity 0.2s加淡入效果（注意：hidden 元素无法直接过渡，得用 class 控制 opacity）
上下方向动画靠 transform + transition
“上下切换”动效不是靠页面滚动，而是让内容区在 Y 轴上位移+透明度变化。关键点在于：动效必须绑定到内容区自身，且每次只对一个面板生效：
- 给所有面板加基础样式：
.tab-pane { opacity: 0; transform: translateY(10px); transition: opacity 0.25s, transform 0.25s; } - 激活态加类
.tab-pane.active：opacity: 1; transform: translateY(0); - JS 切换时只增删
active类，不碰style；CSS 负责动效，JS 只管状态 - 别用
height: 0 / height: auto做上下收起——auto 无法过渡，会瞬间展开；如需高度动画，改用max-height配合固定值（如max-height: 0; → max-height: 500px;）
真正难的不是“怎么让内容上下动”，而是动效与语义、可访问性、资源管理之间的平衡。比如加了 transform 后，若面板内有 position: fixed 元素，会相对该面板定位而非视口；又比如用 hidden 时，屏幕阅读器会跳过整个面板，必须同步更新 aria-hidden="false" 和 tabindex="0" 才能让键盘用户聚焦进去。这些细节不处理，上下动效再顺滑也形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
