JQ-下拉菜单2 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *
 8         {
 9             margin: 0;
10             padding: 0;
11         }
12         #con
13         {
14             margin: 50px auto;
15             list-style: none;
16             width: 400px;
17             height: 50px;
18             background: green;
19         }
20         #con:after
21         {
22             content: "";
23             display: block;
24             clear: both;
25         }
26         #con li
27         {
28             float: left;
29             width: 98px;
30             border:1px solid red;
31             height:48px;
32             line-height: 48px;
33             text-align: center;
34             cursor: pointer;
35             position: relative;
36         }
37         #con div
38         {
39             width: 400px;
40             height: 400px;
41             background: #ccc;
42             position: absolute;
43             left: 0px;
44             top: 50px;
45             display: none;
46         }
47     </style>
48 </head>
49 <body>
50     <ul id="con">
51         <li><h2>人物一</h2><div>人物一</div></li>
52         <li><h2>人物二</h2><div>人物二</div></li>
53         <li><h2>人物三</h2><div>人物三</div></li>
54         <li><h2>人物四</h2><div>人物四</div></li>
55     </ul>
56 </body>
57 <script src="jquery-1.8.3.min.js"></script>
58 <script src="jquery.easing.min.js"></script>
59 
60 <script>
61     $(function() {
62         $('#con li').mouseover(function() {
63             var i=$(this).index('li');
64             $('#con li').eq(i).css({'background':'#ccc','color':'red'});
65             $('#con li div').eq(i).stop(true,true).show('normal');
66         })
67         $('#con li').mouseout(function() {
68             var i=$(this).index('li');
69             $('#con li').eq(i).css({'background':'green','color':'black'});
70             $('#con li div').eq(i).stop(true,true).hide('normal');
71         })
72     })
73 </script>
74 </html>

 

posted @ 2016-09-16 14:49  舍近求猿  阅读(138)  评论(0)    收藏  举报