zoukankan      html  css  js  c++  java
  • 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" 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>
  • 相关阅读:
    javascript中实现类似php 的var_dump
    WKWebView与js交互中产生的内存泄漏
    图片按照指定比例裁剪
    php解析json字符串变量总是空白null
    CocoaPods | iOS详细使用说明
    腾讯IM的那些坑
    JS---案例:协议按钮禁用(倒计时)
    JS---另一个定时器:一次性的
    JS---part5 课程介绍 & part4 复习
    JS---案例:美女时钟
  • 原文地址:https://www.cnblogs.com/zym0m/p/7066993.html
Copyright © 2011-2022 走看看