Bootstrap插件——(Tab)标签页

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

代码如下：

 1    　　<div class="tabbable">  
 2           　　 <ul class="nav nav-tabs">  
 3                  　　<li class="active"><a href="#第一个id" data-toggle="tab">选项一</a></li>   //第一个选项，　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //href 对应第7行的id
 4                 　　 <li><a href="#第二个id" data-toggle="tab">选项二</a></li>    　　　　　　　　 //第二个选项
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //href 对应第10行的id
 5               </ul>  
 6               <div class="tab-content">  
 7                  <div class="tab-pane active" id="第一个id">  　　　　　　　　　　　　　　　　　　　//第一页
 8                    　　　文字一  
 9                  </div>  
10                 <div class="tab-pane" id="第二个id">  　　　　　　　　　　　　　　　　　　　　　　 　//第二页
11                        文字二 
12                 </div>  
13              </div>  
14        </div> 

效果如下：

初始化时为下图：

 点击选项二如下图：

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

 

重要的事情说三遍：

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

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

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

转载于:https://www.cnblogs.com/dedebug/p/5828879.html