简单的tab标签

简单的tab标签

演示

 

XML/HTML Code

1. <div id="moving_tab">  
2.     <div class="tabs">  
3.         <div class="lava"></div>  
4.         <span class="item">Popular Posts</span>  
5.         <span class="item">Recent Posts</span>  
6.   
7.     </div>  
8.                       
9.     <div class="content">                         
10.         <div class="panel">                       
11.             <ul>  
12.                 <li><a href='#'>Panel 01 Item 01</a></li>  
13.                 <li><a href='#'>Panel 01 Item 02</a></li>  
14.                 <li><a href='#'>Panel 01 Item 03</a></li>  
15.                 <li><a href='#'>Panel 01 Item 04</a></li>  
16.                 <li><a href='#'>Panel 01 Item 05</a></li>  
17.             </ul>  
18.             <ul>  
19.                 <li><a href='#'>Panel 02 Item 01</a></li>  
20.                 <li><a href='#'>Panel 02 Item 02</a></li>  
21.                 <li><a href='#'>Panel 02 Item 03</a></li>  
22.                 <li><a href='#'>Panel 02 Item 04</a></li>  
23.                 <li><a href='#'>Panel 02 Item 05</a></li>             
24.             </ul>                         
25.         </div>  
26.   
27.     </div>    
28. </div>  

 

JavaScript Code

1. <script>  
2.   
3. $(document).ready(function () {  
4.   
5.     //set the default location (fix ie 6 issue)  
6.     $('.lava').css({left:$('span.item:first').position()['left']});  
7.       
8.     $('.item').mouseover(function () {  
9.         //scroll the lava to current item position  
10.         $('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});  
11.           
12.         //scroll the panel to the correct content  
13.         $('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});  
14.     });  
15.       
16. });  
17.   
18. </script>  

 

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