本文详解 bootstrap 5 中选项卡（tabs）功能失效的常见原因，重点解决“url 变化但内容不切换”问题，提供符合 bootstrap 5 规范的完整 html 结构、必需的 js/css 引入方式及关键属性修正要点。

本文详解 bootstrap 5 中选项卡（tabs）功能失效的常见原因，重点解决“url 变化但内容不切换”问题，提供符合 bootstrap 5 规范的完整 html 结构、必需的 js/css 引入方式及关键属性修正要点。

在 Bootstrap 5 中，选项卡组件的行为与旧版本（如 v4）有显著差异——data-toggle 已被弃用，必须改用 data-bs-toggle；同时需严格匹配 data-bs-target 与对应 .tab-pane 的 id，且所有 tab 触发元素必须包裹在具有 role="tablist" 的容器内（推荐使用 .nav.nav-tabs）。你原始代码中存在多个关键兼容性问题：使用了已移除的 data-toggle，缺少 role 语义属性，.topnav 并非 Bootstrap 5 认可的导航容器类，且 tab 内容区未正确绑定 id="nav-tabContent" 与 role="tablist" 上下文。

以下是可直接运行的修复版代码（已验证兼容 Bootstrap 5.3+）：

<!-- 必须引入 Bootstrap 5 CSS 和 JS（含 Popper） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- 选项卡导航栏：使用 .nav.nav-tabs + role="tablist" -->
<div class="flex-container">
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-link active" 
       id="nav-one-tab" 
       data-bs-toggle="tab" 
       data-bs-target="#nav-one" 
       type="button" 
       role="tab" 
       aria-controls="nav-one" 
       aria-selected="true">one</a>

    <a class="nav-link" 
       id="nav-two-tab" 
       data-bs-toggle="tab" 
       data-bs-target="#nav-two" 
       type="button" 
       role="tab" 
       aria-controls="nav-two" 
       aria-selected="false">two</a>

    <a class="nav-link" 
       id="nav-three-tab" 
       data-bs-toggle="tab" 
       data-bs-target="#nav-three" 
       role="tab" 
       type="button" 
       aria-controls="nav-three" 
       aria-selected="false">three</a>

    <a class="nav-link" 
       id="nav-four-tab" 
       data-bs-toggle="tab" 
       data-bs-target="#nav-four" 
       role="tab" 
       type="button" 
       aria-controls="nav-four" 
       aria-selected="false">four</a>
  </div>
</div>

<!-- 选项卡内容区：必须添加 id="nav-tabContent" 和 role="tablist" -->
<div id="content-wrap">
  <div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" 
         id="nav-one" 
         role="tabpanel" 
         aria-labelledby="nav-one-tab" 
         tabindex="0">
      <p>text</p>
    </div>
    <div class="tab-pane fade" 
         id="nav-two" 
         role="tabpanel" 
         aria-labelledby="nav-two-tab" 
         tabindex="0">
      <p>text text</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/xiazai/skill4914" title="VPS Bootstrap"><img
                                                                                src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/skill4914" title="VPS Bootstrap">VPS Bootstrap</a>
                                                                        <p>从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
                                                                </div>
                                                                <a href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
    </div>
    <div class="tab-pane fade" 
         id="nav-three" 
         role="tabpanel" 
         aria-labelledby="nav-three-tab" 
         tabindex="0">
      <p>text text text</p>
    </div>
    <div class="tab-pane fade" 
         id="nav-four" 
         role="tabpanel" 
         aria-labelledby="nav-four-tab" 
         tabindex="0">
      <p>text text text text</p>
    </div>
  </div>
</div>

✅ 关键修正点总结：

• 属性更新：全部 data-toggle → data-bs-toggle，href="#one" → data-bs-target="#nav-one"（ID 建议统一加前缀避免冲突）；
• 语义结构：导航容器必须设 role="tablist"，每个 tab 链接设 role="tab"，每个内容面板设 role="tabpanel" 并通过 aria-labelledby 关联对应 tab；
• 激活逻辑：.show.active 类仅保留在当前激活的 .tab-pane 上，其余为 .fade（Bootstrap 5 默认启用淡入效果）；
• JS 依赖：务必引入 bootstrap.bundle.min.js（含 Popper），不可只引入 bootstrap.min.js；
• 样式兼容：自定义类（如 hvr-underline-from-left）可保留，但确保其 CSS 不干扰 .nav-link 的 display 或 pointer-events。

⚠️ 注意：若页面动态加载内容或存在多个 tab 组，请为每组分配唯一 id（如 nav-tab-1, nav-tabContent-1）并确保 data-bs-target 与 id 完全一致——大小写、连字符、前缀均需严格匹配。调试时可打开浏览器控制台，检查是否报错 “No target element found for tab” —— 这通常意味着 data-bs-target 指向的 ID 不存在或拼写错误。