Bootstrap标签页首次加载异常：默认标签内容不显示求助

嘿，这个问题我太熟了！其实就是你漏给默认激活的面板加active类啦😉

问题原因 #

Bootstrap的标签页组件是成对工作的：导航栏里的active标签，必须对应面板容器里的active类，页面加载时才会自动显示对应的内容。你已经给Page1的导航项加了active，但对应的面板div没加这个类，所以初始加载时它是隐藏状态，只有切换标签时Bootstrap的JS会动态给它加上active，这时候切回去就能显示了。

修正后的完整代码 #

<ul class="nav nav-tabs">
  <li class="active"><a href="#panel1" data-toggle="tab">Page 1</a></li>
  <li><a href="#panel2" data-toggle="tab">Page 2</a></li>
</ul>
<div class="tab-content">
  <!-- 关键：给默认显示的面板加上 tab-pane 和 active 类 -->
  <div id="panel1" class="tab-pane active">
    这里是Page 1的面板内容，现在页面加载时就能直接显示啦！
  </div>
  <div id="panel2" class="tab-pane">
    这里是Page 2的面板内容
  </div>
</div>

额外注意点 #

• 所有面板容器都必须加tab-pane类，这是Bootstrap识别标签面板的基础样式类
• 只有默认要展示的面板需要额外添加active类，和导航栏里的active标签一一对应
• 确保你已经正确引入了Bootstrap的JS文件（以及它依赖的jQuery），虽然你的切换功能正常，但这是标签页组件正常工作的前提哦

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