jquery 动画tab标签页

jquery 动画tab标签页

 

演示

 

 

XML/HTML Code

1. <div id="horizontalTab">  
2.         <ul>  
3.             <li><a href="#tab-1">Tab-1</a></li>  
4.             <li><a href="#tab-2">Tab-2</a></li>  
5.             <li><a href="#tab-3">Tab-3</a></li>  
6.         </ul>  
7.   
8.         <div id="tab-1">  
9.             <p>内容1</p>  
10.         </div>  
11.         <div id="tab-2">  
12.             <p>内容2</p>  
13.         </div>  
14.         <div id="tab-3">  
15.             <p>内容3</p>  
16.         </div>  
17.   
18.     </div>  

 

JavaScript Code

1. <script type="text/javascript">  
2.     $(document).ready(function () {  
3.         $('#horizontalTab').responsiveTabs({  
4.             startCollapsed: 'accordion',  
5.             collapsible: true,  
6.             rotate: false,  
7.             setHash: true,  
8.             animation: 'slide'  
9.         });  
10.     });  
11. </script>  

 

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