首页>>TAB标签>>jquery左右滑动的选项卡,tab标签(2013-09-11)

jquery左右滑动的选项卡,tab标签

 css代码和js文件在演示页面可以查看源码

本例只放了2个tab，需要更多的话也很方便添加

jquery左右滑动的选项卡,tab标签
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2.       
  3.         $(function() {  
  4.               
  5.             var indicator = $('#indicator'),  
  6.                     indicatorHalfWidth = indicator.width()/2,  
  7.                     lis = $('#tabs').children('li');  
  8.   
  9.             $("#tabs").tabs("#content section", {  
  10.                 effect: 'fade',  
  11.                 fadeOutSpeed: 0,  
  12.                 fadeInSpeed: 400,  
  13.                 onBeforeClick: function(event, index) {  
  14.                     var li = lis.eq(index),  
  15.                         newPos = li.position().left + (li.width()/2) - indicatorHalfWidth;  
  16.                     indicator.stop(true).animate({ left: newPos }, 600, 'easeInOutExpo');  
  17.                 }  
  18.             });   
  19.   
  20.         });  
  21.   
  22.     </script>  

 

XML/HTML Code
  1. <nav>         
  2.         <ul id="tabs">  
  3.             <li><a class="current" href="#">导航菜单</a></li>  
  4.             <li><a href="#">TAB标签</a></li>  
  5.         </ul>  
  6.         <span id="indicator"></span>  
  7.     </nav>  
  8.       
  9.     <div id="content">  
  10.       
  11.         <section>                 
  12.             <p>各种下拉菜单,导航,多级菜单,右侧展开,左侧展开</p>           
  13.         </section>  
  14.       
  15.         <section>         
  16.             <p>tab标签,选项卡,选卡,jquery选项卡,标签页</p>         
  17.         </section>  
  18.   
  19.     </div>  

 


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