首页>>TAB标签>>tab在底部的jquery tabs选项卡(2019-08-14)

tab在底部的jquery tabs选项卡

tab在底部的jquery tabs选项卡
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="row">  
  2.       <div class="col-md-offset-3 col-md-6">  
  3.         <div class="tab" role="tabpanel">  
  4.           <!-- Tab panes -->  
  5.           <div class="tab-content">  
  6.             <div role="tabpanel" class="tab-pane fade in active" id="Section1">  
  7.               <p>各种下拉菜单,导航,多级菜单,右侧展开,左侧展开</p>  
  8.               <h3>导航菜单</h3>  
  9.             </div>  
  10.             <div role="tabpanel" class="tab-pane fade" id="Section2">  
  11.               <p>tab标签,选项卡,选卡,jquery选项卡,标签页,动态加载tab</p>  
  12.               <h3>TAB标签</h3>  
  13.             </div>  
  14.             <div role="tabpanel" class="tab-pane fade" id="Section3">  
  15.               <p>翻页,分页，无刷新翻页,jquery翻页 本站演示中的分页数据库结构都一样的</p>  
  16.               <h3>分页</h3>  
  17.             </div>  
  18.             <div role="tabpanel" class="tab-pane fade" id="Section4">  
  19.               <p>jquery文字特效,js文字特效,包括一些其他js库的，例如mootools</p>  
  20.               <h3>Jquery文字</h3>  
  21.             </div>  
  22.           </div>  
  23.           <!-- Nav tabs -->  
  24.           <ul class="nav nav-tabs" role="tablist">  
  25.             <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">Section 1</a></li>  
  26.             <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li>  
  27.             <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">Section 3</a></li>  
  28.             <li role="presentation"><a href="#Section4" aria-controls="settings" role="tab" data-toggle="tab">Section 4</a></li>  
  29.           </ul>  
  30.         </div>  
  31.       </div>  
  32.     </div>  

 


原文地址:http://www.freejs.net/article_tabbiaoqian_811.html