侧边标签页“上下切换”本质是垂直显隐控制，需用role="tablist"语义结构、aria-controls关联、hidden属性切换及ArrowUp/ArrowDown键盘导航，确保无障碍与状态同步。
侧边标签页的“上下切换”本质是垂直方向的显隐控制，不是滚动或跳转
HTML里没有原生的“侧边标签页上下切换”语义，所谓上下，其实是把标签项（button）垂直堆叠排列，点击后显示对应内容区——内容区本身仍处于常规文档流中，只是位置在标签右侧或下方。关键不是动效方向，而是结构是否支持无障碍、状态是否可同步、DOM 是否稳定。
用 role="tablist" + data-tab 实现可访问的垂直标签结构
错误做法是写一堆 div class="sidebar-tab" 然后靠 display: none 切换；正确结构必须带语义和关联：
-
div容器加role="tablist"，不能用ul或纯div堆砌 - 每个标签是
button，带role="tab"、tabindex="0"、aria-controls="panel-id" - 内容区用
div role="tabpanel"，id与aria-controls值一致，并设hidden属性（不是style.display） - 用
data-tab（如data-tab="settings"）替代硬编码索引，避免 DOM 顺序变动导致错位
hidden 比 display: none 更可靠，但得手动初始化
首次加载时所有 tabpanel 都带 hidden，页面会白屏——这是最常漏的一步。必须在 JS 中显式移除默认项的 hidden，并同步设置对应 tab 的 aria-selected="true"：
const firstTab = document.querySelector('[role="tab"]');
const firstPanel = document.getElementById(firstTab.getAttribute('aria-controls'));
if (firstTab && firstPanel) {
firstTab.setAttribute('aria-selected', 'true');
firstPanel.removeAttribute('hidden');
}
后续切换只需两步：所有 panel.hidden = true，再 目标 panel.hidden = false；别直接操作 style.display，它会被 CSS 规则覆盖，且破坏 hidden 的语义优先级。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
键盘导航必须补全 ArrowUp/ArrowDown 支持
只响应鼠标点击的侧边标签页，在键盘用户眼里等于不可用。垂直排列下，ArrowUp 和 ArrowDown 必须能切换焦点：
- 监听
keydown事件，捕获ArrowUp/ArrowDown - 根据当前聚焦的
tab元素，找到上一个或下一个同级[role="tab"] - 调用
.focus()并同步更新aria-selected和对应tabpanel的hidden - 注意边界：到第一个时按
ArrowUp应跳到最后一个（环形），或忽略（线性）
没加这层逻辑，role="tablist" 就只是个装饰，屏幕阅读器读不出顺序，Tab 键也进不到标签里。
真正难的不是让内容“上下出现”，而是让每一次切换都保持焦点连续、状态可逆、语义完整。DOM 不销毁、hidden 不滥用、键盘路径不中断——这些点漏掉任意一个，用户就会卡在某个标签再也出不来。
