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>
时间： 2024-07-30 11:09:32