Bootstrap 标签页Tab插件使用方法

标签页

Bootstrap标签页Tab插件需要 bootstrap-tab.js 文件支持，在使用该插件之前，应该导入 jQuery 和 bootstrap-tab.js 文件。

调用方式

1、data 属性调用使用data 属性调用，无需编写任何JavaScript代码，只需定义基本的HTML结构即可：首先，定义导航结构。所有导航链接的 data-toggle 属性值必须是 "tab"，href 属性值为对应内容面板的 id，以便单击标签时，能找到它所对应的内容面板。

<ul class="nav n
4000
av-tabs">

  <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>

  <li><a href="#tab2" data-toggle="tab">Section 2</a></li>

  <li><a href="#tab3" data-toggle="tab">Section 3</a></li>

</ul>

其次，定义内容面板。内容面板的 id，要跟标签页的 href 属性值一一对应，并将所有的内容面板都放在一个 .tab-content 的容器中。

<div class="tab-content">

  <div class="tab-pane active " id="tab1">

    <p>I'm in Section 1.</p>

  </div>

  <div class="tab-pane" id="tab2">

    <p>Howdy, I'm in Section 2.</p>

  </div>

  <div class="tab-pane" id="tab3">

    <p>What up girl, this is Section 3.</p>

  </div>

</div>

Bootstrap也支持胶囊式的标签导航，只需把 "nav-tabs" 替换为 "nav-pills"，还要把 data-toggle 的 "tabs" 替换为 "pill" 即可。如：

<ul class="nav nav-pills">

  <li class="active"><a href="#tab1" data-toggle="pills">Section 1</a></li>

  <li><a href="#tab2" data-toggle="tab">Section 2</a></li>

  <li><a href="#tab3" data-toggle="tab">Section 3</a></li>

</ul>

2、JavaScript调用通过JavaScript调用时，需要在每个链接的单击事件中调用 tab('show') 方法，来单独激活每个标签，并显示对应标签的内容框：

<script>

$('#myTab a').click(function (e) {

  e.preventDefault();

  $(this).tab('show');

})

</script>

其中，e.preventDefault(); 阻止超链接的默认行为，$(this).tab('show'); 显示当前标签页对应的内容框。除此之外，你还可以通过多种方式激活标签页：

$('#myTab a[href="#profile"]').tab('show');   // 选择href="#profile"的标签页

$('#myTab a:first').tab('show');             // 选择第一个标签页

$('#myTab a:last').tab('show');              // 选择最后一个标签页

$('#myTab li:eq(2) a').tab('show');          // 选择第三个标签页 (索引从 0 开始)

版权声明：本文出自 歪脖网 的《Bootstrap教程》，欢迎在线阅读，并提出宝贵意见。