jq-demo-tab切换

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             * {
 8                 margin: 0;
 9                 padding: 0;
10                 border: none;
11             }
12             ul, li {
13                 list-style: none;
14             }
15             
16             #box {
17                  500px;
18                 height: 400px;
19                 margin: 20px auto;
20             }
21             
22             #list1 {
23                 height: 26px;                
24             }
25             
26             #list1 li {
27                  30px;
28                 height: 26px;
29                 line-height: 26px;
30                 float: left;
31                 background: #ddd;
32                 padding: 0 10px;
33                 cursor: pointer;
34             }
35             
36             #list1 li.hover{
37                 background: #ABCDEF;
38                 color: white;
39             }
40             #list2 {
41                  480px;
42                 height: 320px;
43                 background: #abcdef;
44                 padding: 10px;
45             }
46             
47             #list2 li, #list2 img {
48                 480px;
49                 height: 320px;
50             }
51         </style>
52     </head>
53     <body>
54         <div id="box">
55             <ul id="list1">
56                 <li class= "hover">tab1</li>
57                 <li>tab2</li>                
58                 <li>tab3</li>                
59             </ul>
60             <ul id="list2">
61                 <li><img src="images/11.jpg"/></li>
62                 <li><img src="images/22.jpg"/></li>
63                 <li><img src="images/33.jpg"/></li>            
64             </ul>
65             
66         </div>
67         
68         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
69         <script type="text/javascript">
70             $(function () {
71                 //第一张图片 显示，其他隐藏
72                 $("#list2").find("li").first().show().siblings().hide();
73                 
74                 //移入
75                 $("#list1 li").mouseenter(function () {
76                     $(this).addClass("hover").siblings().removeClass("hover");
77                     var index = $(this).index();
78                     $("#list2 li").eq(index).show().siblings().hide();
79                 });
80             })
81         </script>
82     </body>
83 </html>

相关阅读:
非常简洁的js图片轮播
 js广告图片轮播
 图片轮播
 分享到QQ空间、新浪微博、腾讯微博和人人网
 五星简单操作
 Struts2 多文件上传
 CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)
JavaScript中的数据类型
 JavaScript中对象是否需要加引号？
变量提升（hoisting）
原文地址：https://www.cnblogs.com/1032473245jing/p/7494900.html