jq-demo-tab切换

最新推荐文章于 2023-09-15 10:06:35 发布

weixin_30463341

最新推荐文章于 2023-09-15 10:06:35 发布

阅读量61

点赞数

原文链接：http://www.cnblogs.com/1032473245jing/p/7494900.html

版权

 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                 width: 500px;
18                 height: 400px;
19                 margin: 20px auto;
20             }
21             
22             #list1 {
23                 height: 26px;                
24             }
25             
26             #list1 li {
27                 width: 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                 width: 480px;
42                 height: 320px;
43                 background: #abcdef;
44                 padding: 10px;
45             }
46             
47             #list2 li, #list2 img {
48                 width: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>