码迷,mamicode.com
首页 > Web开发 > 详细

js实例之制作多个下拉子菜单,实现下拉菜单显示和隐藏效果

时间:2017-06-22 20:50:35      阅读:300      评论:0      收藏:0      [点我收藏+]

标签:order   lis   家电   content   back   pre   文档   cti   lin   

 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" onmouseover="show(‘chanpin‘)" onmouseout="hide(‘chanpin‘)">产品</div>
19     <div class="erji">
20         <div class="erwai" id="chanpin" onmouseover="xianshi(‘chanpin‘)" onmouseout="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" onmouseover="show(‘xinwen‘)" onmouseout="hide(‘xinwen‘)">新闻</div>
27     <div class="erji">
28         <div class="erwai" id="xinwen" onmouseover="xianshi(‘xinwen‘)" onmouseout="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" onmouseover="show(‘lianxi‘)" onmouseout="hide(‘lianxi‘)">联系</div>
35     <div class="erji">
36         <div class="erwai" id="lianxi" onmouseover="xianshi(‘lianxi‘)" onmouseout="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实例之制作多个下拉子菜单,实现下拉菜单显示和隐藏效果

标签:order   lis   家电   content   back   pre   文档   cti   lin   

原文地址:http://www.cnblogs.com/zym0m/p/7066993.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!