Bootstrap插件——(Tab)标签页

项目中用到了Bootstrap的(Tab)标签页插件,记录如下：

代码如下：

    　　<div class="tabbable">
           　　 <ul class="nav nav-tabs">
                  　　<li class="active"><a href="#第一个id" data-toggle="tab">选项一</a></li>   //第一个选项，　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //href 对应第7行的id
                 　　 <li><a href="#第二个id" data-toggle="tab">选项二</a></li>    　　　　　　　　 //第二个选项
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //href 对应第10行的id
               </ul>
               <div class="tab-content">
                  <div class="tab-pane active" id="第一个id">  　　　　　　　　　　　　　　　　　　　//第一页
                    　　　文字一
                  </div>
                 <div class="tab-pane" id="第二个id">  　　　　　　　　　　　　　　　　　　　　　　 　//第二页
                        文字二
                 </div>
              </div>
        </div> 

效果如下：

初始化时为下图：

aaarticlea/png;base64,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" alt="" />

点击选项二如下图：aaarticlea/png;base64,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" alt="" />

Bootstrap文字教程地址:http://www.uedsc.com/bootstrap-page-header.html

重要的事情说三遍：

欢迎指出错误和不对的地方，以及提出建议，我会及时更新在博客里！

欢迎指出错误和不对的地方，以及提出建议，我会及时更新在博客里！

欢迎指出错误和不对的地方，以及提出建议，我会及时更新在博客里！