横向导航栏禁用需作用于可交互子元素（如、），而非语义容器；禁用推荐aria-disabled+CSS，禁用可用原生disabled属性，整块禁用应使用遮罩层并同步更新ARIA状态。

横向导航栏本身没有“禁用”语义，disabled 属性不能直接加在

、

或

上——浏览器会忽略它。真正能禁用点击的，只有可交互的子元素，比如 @#@#@#@#@#@#@#@#@#@0。用 aria-disabled 保持语义，比纯 CSS 更健壮。

禁用 类导航项的正确姿势

如果横向导航用的是 （例如 SPA 中的路由切换按钮），那就简单多了：直接用原生 disabled 属性。

• 它天然阻止点击、聚焦、键盘交互，且视觉上自动降级（除非被 CSS 覆盖）
• 务必配合 CSS 修正默认样式，否则某些浏览器下禁用按钮仍显示手型光标
• 不要只靠 pointer-events: none 替代，那会绕过表单控件的语义和可访问性保障

示例：

a.nav-link[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}
a.nav-link[aria-disabled="true"]:focus {
  outline: none;
}

对应 CSS：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

<button type="button" class="nav-btn" disabled>分析报表</button>

全局禁用整个导航区域的边界情况

极少数场景需要“整块禁用”，比如弹窗打开时冻结顶部导航。这时不能只处理子元素，而要从布局层拦截：

• 在
  外层加一个全尺寸遮罩层（
  ），z-index 高于导航，pointer-events: all 并监听点击做空处理
• 或者给 加 style="pointer-events: none"，再单独给弹窗设 pointer-events: auto ——但要注意这会影响所有页面交互，风险高
• 绝对避免用 display: none 或 visibility: hidden 来“隐藏式禁用”，因为用户无法感知当前状态，且破坏可访问性

最易被忽略的一点：禁用后必须同步更新 aria-hidden 和 aria-disabled，否则屏幕阅读器用户完全不知道导航已失效。

.nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: #e0e0e0;
}