Bootstrap学习js插件篇之标签页

扩展了标签页式导航

此插件为标签页式导航组件添加了标签页内容区。

用法

通过JavaScript启动可切换标签页（每个标签页单独被激活）：

$('#myTab a').click(function (e) {  e.preventDefault()  $(this).tab('show')})

去掉所有a标签的data-toggle然后调用js

可以有以下几种方式单独激活标签页：

$('#myTab a[href="#profile"]').tab('show') // Select tab by name$('#myTab a:first').tab('show') // Select first tab$('#myTab a:last').tab('show') // Select last tab$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

只需为页面元素简单的添加data-toggle="tab"或data-toggle="pill"就可以无需写任何JavaScript代码也能激活标签页或胶囊式导航。为ul添加.nav和.nav-tabsclasse即可为其赋予Bootstrap标签页样式；而添加nav和nav-pillsclass可以为其赋予胶囊标签页。

可以通过jQuery来执行首次的加载

<script>  $(function () {    $('#myTab a:first').tab('show')  })</script>