如何默认激活Bootstrap Pills标签页并高亮显示Tab1

没问题，这是Bootstrap标签页组件很常见的小配置，只需要给对应标签和内容面板加上active类就能搞定，具体操作如下：

步骤1：给Tab1的<li>标签添加active类 #

你原来的代码里，Tab1对应的<li>没有激活状态的标识，Bootstrap需要通过active类来识别当前高亮的标签。修改后的导航代码如下：

<ul class="nav nav-pills">
  <li class="active"><a data-toggle="pill" href="#Tab1">Tab1</a></li>
  <li><a data-toggle="pill" href="#Tab2">Tab2</a></li>
  <li><a data-toggle="pill" href="#Tab3">Tab3</a></li>
</ul>

步骤2：给Tab1对应的内容面板添加active类 #

光高亮标签还不够，还要确保Tab1对应的内容默认显示出来，所以需要给对应id="Tab1"的tab-pane容器加上active类（如果之前没加的话）：

<div class="tab-content">
  <div id="Tab1" class="tab-pane fade in active">
    <!-- Tab1的内容 -->
  </div>
  <div id="Tab2" class="tab-pane fade">
    <!-- Tab2的内容 -->
  </div>
  <div id="Tab3" class="tab-pane fade">
    <!-- Tab3的内容 -->
  </div>
</div>

原理说明 #

Bootstrap的nav-pills组件通过active类来标记当前处于激活状态的导航项，同时tab-content里的tab-pane也需要对应的active类来控制内容的显示/隐藏，两者必须一一对应，这样页面加载时就能同时实现Tab1的高亮和内容的默认展示啦。

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