本文详解 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>
<div class="tab-pane fade" id="nav-three" role="tabpanel" aria-labelledby="nav-three-tab" tabindex="0">
<p>text text text</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a rel="nofollow" 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-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 不存在或拼写错误。
