Bootstrap标签页多次点击无法切换内容的问题求助

看起来你的标签页逻辑已经有了雏形，但之所以只能切换一次，大概率是依赖引入问题或者导航结构不符合Bootstrap组件的预期导致的。下面一步步帮你修复：

1. 先确认依赖是否正确引入 #

Bootstrap的标签页组件依赖jQuery和Bootstrap JS，而且引入顺序很重要：必须先引入jQuery，再引入Bootstrap的JS文件，CSS可以放在页面头部。

你需要在页面中添加这些资源（如果还没加的话）：

<!-- 头部引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

<!-- 页面底部引入jQuery和Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

2. 修正导航结构，匹配Bootstrap组件规范 #

Bootstrap的标签页导航需要被包裹在nav容器中，同时要给默认激活的标签链接加上active类（和右侧的tab-pane active对应），这样组件才能正确跟踪激活状态。

修改你的左侧导航代码：

<div class="col-lg-3">
  <!-- 添加nav flex-column容器，让链接垂直排列 -->
  <nav class="nav flex-column">
    <!-- 给第一个链接添加active类，和右侧的tab-pane对应 -->
    <a class="nav-link p-3 mb-2 sidebar-link justify-content-between text-success ml-4 active" href="#1" data-toggle="tab">
      <h4 class="text-success size">Vehicles</h4>
    </a>
    <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#2" data-toggle="tab">
      <h4 class="text-success size">Battery</h4>
    </a>
    <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#3" data-toggle="tab">
      <h4 class="text-success size">Charging</h4>
    </a>
  </nav>
</div>

3. （可选）手动初始化标签页（如果原生组件仍不生效） #

如果上面两步做完还是有问题，可能是页面中有其他JS冲突导致Bootstrap的自动初始化失效。这时可以手动写JS来处理切换逻辑：

在页面底部添加这段代码：

$(document).ready(function() {
  $('.nav-link').on('click', function(e) {
    e.preventDefault(); // 阻止默认跳转行为
    
    // 移除所有导航链接的active类
    $('.nav-link').removeClass('active');
    // 给当前点击的链接添加active类
    $(this).addClass('active');
    
    // 获取目标标签页的ID
    const targetTab = $(this).attr('href');
    // 移除所有标签页内容的active类
    $('.tab-pane').removeClass('active');
    // 激活对应的标签页内容
    $(targetTab).addClass('active');
  });
});

这样修改后，你的标签页应该就能自由切换多次了。核心是让Bootstrap能正确识别导航结构，并且依赖资源加载正确，确保组件的状态切换逻辑能正常运行。

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