首页>>TAB标签>>简单的tab标签(2013-11-23)

简单的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