Bootstrap 5 可切换标签在Nunjucks模板中无法切换内容的问题

核心排查点与解决步骤 #

1. 确认Bootstrap JS的正确引入 #

Bootstrap 5的标签切换依赖其JavaScript组件，必须确保你引入的是包含Popper的版本（bootstrap.bundle.min.js），或者同时引入popper.min.js和bootstrap.min.js。仅引入CSS的话，标签无法实现切换功能。

在Nunjucks模板中，推荐将脚本放在页面底部的</body>标签之前，示例代码：

<script src="/path/to/bootstrap.bundle.min.js"></script>
</body>

2. 检查标签与内容区的ID匹配 #

Bootstrap标签通过data-bs-target（或href）与内容区的id关联，必须确保两者完全匹配，且Nunjucks渲染过程中没有篡改这些ID。比如官方示例的核心结构：

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
</div>

重点确认data-bs-target="#home"对应内容区的id="home"，没有因Nunjucks模板变量或循环逻辑导致ID不匹配。

3. 确保DOM加载完成后初始化（或手动初始化） #

如果脚本放在<head>标签内，需要添加defer属性确保DOM加载完成后再执行脚本：

<script src="/path/to/bootstrap.bundle.min.js" defer></script>

若自动初始化仍失效，可手动初始化标签组件，在页面底部添加如下代码：

document.addEventListener('DOMContentLoaded', function() {
  const triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
  triggerTabList.forEach(function (triggerEl) {
    const tabTrigger = new bootstrap.Tab(triggerEl)
    triggerEl.addEventListener('click', function (event) {
      event.preventDefault()
      tabTrigger.show()
    })
  })
})

4. 排查Nunjucks模板的渲染逻辑 #

如果通过Nunjucks循环生成标签和内容，需确保每个标签的data-bs-target、aria-controls，以及内容区的id、aria-labelledby一一对应。示例循环渲染代码：

<ul class="nav nav-tabs" id="tabList" role="tablist">
  {% for item in tabItems %}
  <li class="nav-item" role="presentation">
    <button class="nav-link {% if loop.first %}active{% endif %}" id="{{item.id}}-tab" data-bs-toggle="tab" data-bs-target="#{{item.id}}" type="button" role="tab" aria-controls="{{item.id}}" aria-selected="{{loop.first}}">{{item.title}}</button>
  </li>
  {% endfor %}
</ul>
<div class="tab-content" id="tabContent">
  {% for item in tabItems %}
  <div class="tab-pane fade {% if loop.first %}show active{% endif %}" id="{{item.id}}" role="tabpanel" aria-labelledby="{{item.id}}-tab">{{item.content}}</div>
  {% endfor %}
</div>

通过变量拼接唯一ID，避免出现ID冲突或不匹配的情况。

内容的提问来源于stack exchange，提问作者quielfala