CSS组件中说了如何定义标签页，但标签页的切换还得依托于JavaScript插件来定义切换的逻辑。

---

标签页的切换

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">首页</a></li>
  <li role="presentation"><a href="#tiandi" aria-controls="tiandi" role="tab" data-toggle="tab">天地会</a></li>
  <li role="presentation"><a href="#yihe" aria-controls="yihe" role="tab" data-toggle="tab">义和团</a></li>
  <li role="presentation"><a href="#taiping" aria-controls="taiping" role="tab" data-toggle="tab">太平天国</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">
      这是首页...
  </div>
  <div role="tabpanel" class="tab-pane" id="tiandi">
      反清复明...
  </div>
  <div role="tabpanel" class="tab-pane" id="yihe">
      扶清灭洋...
  </div>
  <div role="tabpanel" class="tab-pane" id="taiping">
      耕者有其田...
  </div>
</div>

运行一下

淡入淡出效果 - fade

给每个tab-pane标签页的class类加上fade类，另外注意，第一页标签还得加上in类，即加上fade in类。

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">
      这是首页...
  </div>
  <div role="tabpanel" class="tab-pane fade" id="tiandi">
      反清复明...
  </div>
  <div role="tabpanel" class="tab-pane fade" id="yihe">
      扶清灭洋...
  </div>
  <div role="tabpanel" class="tab-pane fade" id="taiping">
      耕者有其田...
  </div>
</div>

运行一下

标签页方法 - 通过JS让某个标签页显示

$('#someTab').tab('show')

注意：上述选择器选择的是包含标签页名称的<a>元素，而不是选择指定标签面板。

运行一下

标签页 - 事件

事件	说明
show.bs.tab	一旦某个标签页进行显示动作，立即触发该事件
shown.bs.tab	一旦某个标签页显示完毕，立即触发该事件
hide.bs.tab	一旦某个标签页进行隐藏动作，立即触发该事件
hidden.bs.tab	一旦某个标签页隐藏完毕，立即触发该事件

示例：当指定标签页显示完毕，则触发预设事件（弹出“反清复明”）

$('#tab4').on('shown.bs.tab', function (e) {
    alert("反清复明");
});

运行一下