bootstrap中jquery插件——带下拉菜单的标签页

这篇是用来记录怎样为应用了bootstrap样式、组件的元素引用标签页插件，其实无论使用bootstrap中哪一个插件都有两种方式：

一种是直接使用data-*扩展属性，这是 Bootstrap 中的一等 API，也应该是首选方式。

另一种是使用编程方式的 API，即用写js的方式来调用插件函数实现效果，一般情况不建议使用这种方式。

应用了组件还没有应用标签页插件时的写法和效果：

<ul class="nav nav-tabs">
<li class="active"><a href="#">Index</a></li>
<li><a href="#">contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">products <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
</ul>
</li>
</ul>

<div class="tab-content">
<div class="tab-pane fade in active" id="index">
IndexindexindexindexindexindexindexindexindexindexindexindexindexIndexindexindexindexindexindexindexindexi ndexindexindexindexindexIndexindexindexindexindexindexindexindexindexindexindexindexindexIndexinde xindexindexindexindexindexindexindexindexindexindexindexIndexindexindexindexindexindexindexindexindexindexindexindexindexIndexindexindexindexindexin dexindexindexindexindexindexindexindexIndexindexindexindexindexindexindexindexindexindexindex
</div>
<div class="tab-pane fade" id="contact">contactcontactcontactcontact</div>
<div class="tab-pane fade" id="first">firstfirstfirstfirstfirst</div>
<div class="tab-pane fade" id="second">secondsecondsecondsecond</div>
<div class="tab-pane fade" id="third">thirdthirdthirdthirdthirdthird</div>
</div>

效果：



改变成另一种标签样式，只需将.nav-tabs换成.nav-pills，也可以将标签扩展到100%宽度，再加一个.nav-justified属性就可以。

因为还没有使用插件，所以现在只是一个展示效果，并不可以点击切换标签页。

注意：.tab-pane中的内容和标签是对应的，每个.tab-pane都应该写上id属性，方便插件定位保证点击标签改变显示内容时显示正确。

现在可以使用插件了，扩展属性的方式使用插件是非常简单的，只需要两步：

1、在每个li标签页的a标签上加data-toggle=”tab”

2、将每个li标签页的a标签的href属性锚点指向对应内容id，即：

<li class="active"><a href="#index" data-toggle="tab">Index</a></li>

完整代码为：

<ul class="nav nav-tabs">
<li class="active"><a href="#index" data-toggle="tab">Index</a></li>
<li><a href="#contact" data-toggle="tab">contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">products <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#first" data-toggle="tab">first</a></li>
<li><a href="#second" data-toggle="tab">second</a></li>
<li><a href="#third" data-toggle="tab">third</a></li>
</ul>
</li>
</ul>

<div class="tab-content">
...（同上）
</div>

这样就可以点击切换标签页了：