Bootstrap选项卡无法切换的解决方法

Bootstrap选项卡链接行为异常分析

在使用Bootstrap框架构建选项卡（Tabs）或药丸（Pills）导航时，开发者可能会遇到一个常见问题：点击导航链接时，URL的哈希部分（例如#work）会更新，但关联的div内容区域却未能随之切换显示。这通常表明Bootstrap的JavaScript未能正确识别并激活选项卡切换逻辑。

以下是一个典型的、可能导致此问题的HTML结构示例：

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#personal" role="tab" data-toggle="tab">Personal</a></li>
  <li role="presentation"><a href="#work" role="tab" data-toggle="tab">Work</a></li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="personal">
    <!-- Personal tab content -->
    <p>个人信息详情</p>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="work">
    <!-- Work tab content -->
    <p>工作信息详情</p>
  </div>
</div>