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>

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