Tab切换故障：切换至Profile Tab内容空白问题排查

核心问题分析 #

从Home Tab切换到Profile Tab时内容空白，主要由三个冲突点导致：

1. Bootstrap版本冲突 #

你同时引入了Bootstrap 4和Bootstrap 5的CSS与JS文件，两个版本的Tab组件API不兼容：

• Bootstrap 4使用data-toggle="tab"属性，而Bootstrap 5改为data-bs-toggle="tab"
• 两个版本的JS文件会互相覆盖组件逻辑，导致Tab切换功能异常

2. 自定义JS与Bootstrap内置Tab功能冲突 #

你自己编写了Tab点击事件的逻辑，但Bootstrap本身已经提供了完整的Tab切换实现，两者同时运行会导致显示逻辑混乱：

• 自定义JS通过直接修改style.display控制内容显示，会覆盖Bootstrap通过active、show类实现的显示逻辑
• 点击Tab时，自定义代码和Bootstrap内置代码同时执行，造成状态冲突

3. 自定义CSS破坏Bootstrap Tab样式 #

你添加的CSS规则与Bootstrap默认Tab样式冲突：

.tab-content .tab-pane {
  display: none;
}

.tab-content .tab-pane.active {
  display: block;
}

Bootstrap的Tab组件依赖fade和show类实现过渡动画与显示，自定义的display设置会直接覆盖这些类的作用，导致内容无法正确显示。

修复步骤 #

步骤1：移除重复的Bootstrap版本 #

保留一个Bootstrap版本，建议用Bootstrap 5，删除Bootstrap 4的引入：

<!-- 删除以下Bootstrap4相关代码 -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

步骤2：更新Tab的data属性 #

将HTML中Tab的data-toggle改为Bootstrap 5的data-bs-toggle：

<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">About</a>
<a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Timeline</a>

步骤3：删除自定义的Tab切换JS代码 #

直接使用Bootstrap内置的Tab功能，不需要自己写点击事件，删除全部自定义JS代码。

步骤4：移除冲突的CSS规则 #

删除自定义的Tab显示控制CSS：

.tab-content .tab-pane {
  display: none;
}

.tab-content .tab-pane.active {
  display: block;
}

完成以上步骤后，Tab切换功能就能正常工作，Profile Tab的内容会正确显示。

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