网页内Tab切换无法用Ctrl+1~9实现，必须用JS监听keydown事件并手动映射数字键到面板逻辑，同时处理焦点、无障碍属性及输入上下文等细节。
HTML中无法用数字键切换网页内Tab标签页
浏览器原生的 Ctrl+1 到 Ctrl+9 快捷键，只作用于**浏览器窗口级的标签页（tab）**，和网页内部用 <div> 实现的 Tab 切换组件完全无关。你在 HTML 里写再多 <code>data-tab 或 class，按 Ctrl+3 都不会跳到第三个面板——那是浏览器在切窗口标签，不是你的 JS 在控制 DOM。
网页内Tab切换必须靠JS绑定键盘事件
想让用户按数字键（比如 1、2、3）直接激活对应 Tab 面板，得自己监听 keydown 事件，并映射到面板逻辑。这不是浏览器自动支持的功能。
- 监听
document.addEventListener('keydown', handler)，但注意避免干扰表单输入——要排除input、textarea、contenteditable等聚焦状态 - 判断
event.key是否为 '1'～'9'，再转成数字索引（parseInt(event.key)） - 确保索引不越界：如果只有 4 个 Tab，按
5就不该触发任何操作 - 调用你已有的 Tab 切换函数，比如
activateTab(2)（对应第 2 个）
为什么不能直接用 tabindex + 数字键？
tabindex 控制的是 Tab 键顺序，不是数字键响应。即使给每个 Tab 按钮设了 tabindex="1"～"4"，按 2 依然不会聚焦第二个按钮——它只对 Tab / Shift+Tab 生效。数字键本身没有语义化导航行为，必须手动拦截并处理。
另外，别忘了加 role="tab" 和 aria-controls 属性，否则屏幕阅读器用户根本不知道这些按钮能用数字键操作，键盘导航也形同虚设。
立即学习“前端免费学习笔记（深入）”；
容易忽略的兼容与体验细节
数字键切换看似简单，实际落地有几个硬伤：
- Mac 用户默认用
Cmd+1～Cmd+9切浏览器标签，和网页内功能冲突，需明确提示或避开Cmd组合 - 用户可能正在输入数字（比如填手机号），此时触发 Tab 切换会打断操作——必须检测
event.target是否可编辑 - 没有视觉反馈：按下
3后，焦点没移到对应按钮上，用户不确定是否生效；建议同步调用button.focus() - 首次加载时若未初始化默认选中项，按任意数字键都会失败——
activateTab(1)要在 DOM ready 后立即执行一次
真正健壮的实现，不是加几行 addEventListener 就完事，而是要把键盘意图、焦点管理、无障碍属性、输入上下文全串起来。漏掉其中一环，功能就只对“鼠标党”有效。
