Bootstrap按钮组切换Tab内容失效问题排查求助

你的Bootstrap标签页切换失效主要是几个细节没踩对，咱们一步步来修正：

1. Button标签误用了href属性 #

Bootstrap里，用<button>触发tab切换时，不能用href，得换成data-target属性来指定对应的tab面板ID——href是给<a>标签用的规则，button元素要遵循自己的属性规范：

修改前的按钮代码：

<button type="button" class="btn btn-primary" href="#link1" data-toggle="tab" role="tab"> Link 1</button>
<button type="button" class="btn btn-outline-primary" href="#link2" data-toggle="tab" role="tab">Link 2 </button>

修改后：

<button type="button" class="btn btn-primary" data-target="#link1" data-toggle="tab" role="tab"> Link 1</button>
<button type="button" class="btn btn-outline-primary" data-target="#link2" data-toggle="tab" role="tab">Link 2 </button>

2. 确保Tab面板结构完整且正确 #

你代码里tab-content下的内容没写完，要保证每个按钮对应的<div class="tab-pane">存在，ID和按钮的data-target完全匹配，同时给默认显示的tab加上active show类（不然初始状态所有tab都会隐藏）：

完整的tab-content示例：

<div class="tab-content bg-white" id="myTabContent">
  <!-- 默认激活的tab -->
  <div class="tab-pane fade active show" id="link1" role="tabpanel">
    这是Link 1对应的内容
  </div>
  <div class="tab-pane fade" id="link2" role="tabpanel">
    这是Link 2对应的内容
  </div>
</div>

3. 确认引入了Bootstrap的JavaScript依赖 #

Tab切换是需要Bootstrap JS支持的，你得确保页面末尾已经引入对应版本的JS文件：

• 如果是Bootstrap 5，直接引入打包好的bundle（内置Popper）：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

• 如果是Bootstrap 4，需要按顺序引入jQuery、Popper、Bootstrap JS：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

把这几点都修正后，你的tab切换功能应该就能正常工作了！

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