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

这篇是用来记录怎样为应用了bootstrap样式、组件的元素引用标签页插件，其实无论使用bootstrap中哪一个插件都有两种方式：
一种是直接使用data-*扩展属性，这是 Bootstrap 中的一等 API，也应该是首选方式。
另一种是使用编程方式的 API，即用写js的方式来调用插件函数实现效果，一般情况不建议使用这种方式。

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

    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Indexa>li>
        <li><a href="#">contacta>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="#">firsta>li>
                <li><a href="#">seconda>li>
                <li><a href="#">thirda>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">contactcontactcontactcontactdiv>
        <div class="tab-pane fade" id="first">firstfirstfirstfirstfirstdiv>
        <div class="tab-pane fade" id="second">secondsecondsecondseconddiv>
        <div class="tab-pane fade" id="third">thirdthirdthirdthirdthirdthirddiv>
    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">Indexa>li>

完整代码为：

<ul class="nav nav-tabs">
        <li class="active"><a href="#index" data-toggle="tab">Indexa>li>
        <li><a href="#contact" data-toggle="tab">contacta>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">firsta>li>
                <li><a href="#second" data-toggle="tab">seconda>li>
                <li><a href="#third" data-toggle="tab">thirda>li>
            ul>
        li>
    ul>

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

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