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

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

本例只放了2个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