首页>>TAB标签>>TAB选项卡自动切换(2019-07-29)

TAB选项卡自动切换

TAB选项卡自动切换
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="mt-tabpage" js-tab="2">  
  2.     <div class="mt-tabpage-title">  
  3.         <a href="javascript:;" class="mt-tabpage-item mt-tabpage-item-cur">公告</a>  
  4.         <a href="javascript:;" class="mt-tabpage-item">决定</a>  
  5.         <a href="javascript:;" class="mt-tabpage-item">会议</a>  
  6.     </div>  
  7.     <div class="mt-tabpage-count">  
  8.         <ul class="mt-tabpage-cont__wrap">  
  9.             <li class="mt-tabpage-item">Cont1</li>  
  10.             <li class="mt-tabpage-item">Cont2</li>  
  11.             <li class="mt-tabpage-item">Cont3</li>  
  12.         </ul>  
  13.     </div>  
  14. </div>  
  15.   
  16. <div class="mt-tabpage" js-tab="3">  
  17.     <div class="mt-tabpage-title">  
  18.         <a href="javascript:;" class="mt-tabpage-item mt-tabpage-item-cur">公告</a>  
  19.         <a href="javascript:;" class="mt-tabpage-item">决定</a>  
  20.         <a href="javascript:;" class="mt-tabpage-item">会议</a>  
  21.     </div>  
  22.     <div class="mt-tabpage-count">  
  23.         <ul class="mt-tabpage-cont__wrap">  
  24.             <li class="mt-tabpage-item">Cont1</li>  
  25.             <li class="mt-tabpage-item">Cont2</li>  
  26.             <li class="mt-tabpage-item">Cont3</li>  
  27.         </ul>  
  28.     </div>  
  29. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(function () {  
  3.   
  4.     $('[js-tab=2]').tab({  
  5.         mouse: 'over',   //切换方式：over，click  
  6.         autoPlay: true,  //播放方式：false，true  
  7.         curDisplay: 1,     //当前第一个打开  
  8.         changeMethod: 'horizontal'  //切换选项：默认default，horizontal，vertical，opacity这4种方式  
  9.     });  
  10.   
  11.     $('[js-tab=3]').tab({  
  12.         curDisplay: 2,  
  13.         changeMethod: 'horizontal'  
  14.     });  
  15.       
  16. });  
  17. </script>  

 


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