利用jquery制作简单tab选项卡切换效果案例代码教程

admin

利用jquery制作简单tab选项卡切换效果案例代码教程

利用jquery制作简单tab切换效果案例代码教程
第一步：引入jQuery.js
第二步：css写入
第三步：html代码，如下

1. <div class="zidiu">
   
2.         <div class="nav">
   
3.             <ul>
   
4.                 <li class="cur">
   
5.                     <a href="">金黑网络</a>
   
6.                 </li>
   
7.                 <li>
   
8.                     <a href="">关于我们</a>
   
9.                 </li>
   
10.                 <li>
    
11.                     <a href="">产品中心</a>
    
12.                 </li>
    
13.                 <li>
    
14.                     <a href="">新闻中心</a>
    
15.                 </li>
    
16.                 <li>
    
17.                     <a href="">联系我们</a>
    
18.                 </li>
    
19.             </ul>
    
20.         </div>
    
21. 
    
22.         <div class="content">
    
23.             <ul>
    
24.                 <li>
    
25.                     <a href="">金黑网络</a>
    
26.                 </li>
    
27.                 <li>
    
28.                     <a href="">关于我们</a>
    
29.                 </li>
    
30.                 <li>
    
31.                     <a href="">产品中心</a>
    
32.                 </li>
    
33.                 <li>
    
34.                     <a href="">新闻中心</a>
    
35.                 </li>
    
36.                 <li>
    
37.                     <a href="">联系我们</a>
    
38.                 </li>
    
39.             </ul>
    
40.         </div>
    
41.     </div>

复制代码

JS代码（重点）：

1. <script>
   
2.         $(function() {
   
3.             $('.nav ul li').mouseover(function() {
   
4.                 $(this).addClass('cur').siblings().removeClass('cur');
   
5.                 var index = $(this).index();
   
6.                 $('.content ul li').eq(index).show().siblings().hide();
   
7.             });
   
8. 
   
9.         });
   
10.     </script>

复制代码