首页 > 代码库 > js实例之制作多个下拉子菜单,实现下拉菜单显示和隐藏效果
js实例之制作多个下拉子菜单,实现下拉菜单显示和隐藏效果
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>无标题文档</title> 4 <style type="text/css"> 5 *{margin:0px auto;padding:0px;} 6 #menu{width:800px;height:40px;margin-top:100px;} 7 .list{width:100px;height:40px;text-align:center;line-height:40px;vertical-align:middle;float:left;border:1px solid #333;} 8 .erji{width:0px;height:0px;float:left;} 9 .erwai{width:100px;height:122px;border:1px solid 10 #333;position:relative;top:41px;left:-102px; display:none;} 11 .item{width:100px;height:40px;text-align:center;line-height:40px;vertical-align:middle;border-bottom:1px solid #333;} 12 </style> 13 14 </head> 15 16 <body> 17 <div id="menu"> 18 <div class="list" onm ouseover="show(‘chanpin‘)" onm ouseout="hide(‘chanpin‘)">产品</div> 19 <div class="erji"> 20 <div class="erwai" id="chanpin" onm ouseover="xianshi(‘chanpin‘)" onm ouseout="xiaoshi(‘chanpin‘)"> 21 <div class="item">食品</div> 22 <div class="item">家电</div> 23 <div class="item">手机</div> 24 </div> 25 </div> 26 <div class="list" onm ouseover="show(‘xinwen‘)" onm ouseout="hide(‘xinwen‘)">新闻</div> 27 <div class="erji"> 28 <div class="erwai" id="xinwen" onm ouseover="xianshi(‘xinwen‘)" onm ouseout="xiaoshi(‘xinwen‘)"> 29 <div class="item">美食</div> 30 <div class="item">旅游</div> 31 <div class="item">家庭</div> 32 </div> 33 </div> 34 <div class="list" onm ouseover="show(‘lianxi‘)" onm ouseout="hide(‘lianxi‘)">联系</div> 35 <div class="erji"> 36 <div class="erwai" id="lianxi" onm ouseover="xianshi(‘lianxi‘)" onm ouseout="xiaoshi(‘lianxi‘)"> 37 <div class="item">电话</div> 38 <div class="item">网址</div> 39 <div class="item">地址</div> 40 </div> 41 </div> 42 </div> 43 </body> 44 <script type="text/javascript"> 45 function show(id){ 46 var a=document.getElementById(id); 47 a.style.display="block"; 48 } 49 function hide(id){ 50 var a=document.getElementById(id); 51 a.style.display="none"; 52 } 53 function xianshi(id){ 54 var a=document.getElementById(id); 55 a.style.display="block"; 56 } 57 function xiaoshi(id){ 58 var a=document.getElementById(id); 59 a.style.display="none"; 60 } 61 </script> 62 </html>
js实例之制作多个下拉子菜单,实现下拉菜单显示和隐藏效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。