首页 > 代码库 > JQ-下拉菜单2
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 #con13 {14 margin: 50px auto;15 list-style: none;16 width: 400px;17 height: 50px;18 background: green;19 }20 #con:after21 {22 content: "";23 display: block;24 clear: both;25 }26 #con li27 {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 div38 {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>
JQ-下拉菜单2
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。