Bootstrap 5.2 Tab HTML代码无法正常工作，问题出在哪里？

我正绞尽脑汁想让Bootstrap标签页正常运行。示例代码能正常工作，但我自己生成的标签页代码却无法正常切换，肯定是遗漏了某个简单的细节：

<ul class="nav nav-tabs" id="7b310c9a-3300-483e-9ddd-6de1d38c228c-run-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="7b310c9a-3300-483e-9ddd-6de1d38c228c-0-tab" data-bs-toggle="tab" data-bs-target="#7b310c9a-3300-483e-9ddd-6de1d38c228c-0-pane" type="button" role="tab" aria-controls="7b310c9a-3300-483e-9ddd-6de1d38c228c-0-pane" aria-selected="true">0
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="802a6e18-485b-4cfe-8154-d67b677a565f-1-tab" data-bs-toggle="tab" data-bs-target="#802a6e18-485b-4cfe-8154-d67b677a565f-1-pane" type="button" role="tab" aria-controls="802a6e18-485b-4cfe-8154-d67b677a565f-1-pane" aria-selected="false">1
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="0dc3ed87-6c4e-496a-a313-c2b6d606d8ad-2-tab" data-bs-toggle="tab" data-bs-target="#0dc3ed87-6c4e-496a-a313-c2b6d606d8ad-2-pane" type="button" role="tab" aria-controls="0dc3ed87-6c4e-496a-a313-c2b6d606d8ad-2-pane" aria-selected="false">2
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="852d36ac-2768-48ac-9fa4-e73d1459b780-3-tab" data-bs-toggle="tab" data-bs-target="#852d36ac-2768-48ac-9fa4-e73d1459b780-3-pane" type="button" role="tab" aria-controls="852d36ac-2768-48ac-9fa4-e73d1459b780-3-pane" aria-selected="false">3
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="b7193c34-b2e8-4577-a07d-3e71acd7b1e2-4-tab" data-bs-toggle="tab" data-bs-target="#b7193c34-b2e8-4577-a07d-3e71acd7b1e2-4-pane" type="button" role="tab" aria-controls="b7193c34-b2e8-4577-a07d-3e71acd7b1e2-4-pane" aria-selected="false">4
    </button>
  </li>
</ul>
<div class="tab-content" id="7b310c9a-3300-483e-9ddd-6de1d38c228c-run-tab-content">
  <div class="tab-pane fade show active" id="7b310c9a-3300-483e-9ddd-6de1d38c228c-0-pane" role="tabpanel" aria-labelledby="7b310c9a-3300-483e-9ddd-6de1d38c228c-0-tab" tabindex="0">
    Content for: 0
  </div>
  <div class="tab-pane fade" id="802a6e18-485b-4cfe-8154-d67b677a565f-1-pane" role="tabpanel" aria-labelledby="802a6e18-485b-4cfe-8154-d67b677a565f-1-tab" tabindex="0">
    Content for: 1
  </div>
  <div class="tab-pane fade" id="0dc3ed87-6c4e-496a-a313-c2b6d606d8ad-2-pane" role="tabpanel" aria-labelledby="0dc3ed87-6c4e-496a-a313-c2b6d606d8ad-2-tab" tabindex="0">
    Content for: 2
  </div>
  <div class="tab-pane fade" id="852d36ac-2768-48ac-9fa4-e73d1459b780-3-pane" role="tabpanel" aria-labelledby="852d36ac-2768-48ac-9fa4-e73d1459b780-3-tab" tabindex="0">
    Content for: 3
  </div>
  <div class="tab-pane fade" id="b7193c34-b2e8-4577-a07d-3e71acd7b1e2-4-pane" role="tabpanel" aria-labelledby="b7193c34-b2e8-4577-a07d-3e71acd7b1e2-4-tab" tabindex="0">
    Content for: 4
  </div>
</div>

你的代码结构本身符合Bootstrap 5标签页的规范，问题大概率出在以下几点：

• 缺少Bootstrap JavaScript文件：Bootstrap标签页的切换交互依赖其JS组件，仅引入CSS无法实现功能。需确保页面同时引入Bootstrap的CSS和JavaScript文件。

• 验证ID匹配准确性：再次确认按钮的data-bs-target属性值与对应tab-pane的ID完全一致，不能有空格、大小写错误或字符遗漏。

• 排查JS冲突问题：如果页面引入了其他JavaScript库，可能与Bootstrap的JS代码冲突，可暂时移除其他库测试功能是否恢复。

另外，UUID格式的ID虽不影响功能，但换成更简洁的命名会让代码更易维护。

内容的提问来源于stack exchange，提问作者K.H.