zoukankan      html  css  js  c++  java
  • 9月23日JavaScript作业----子菜单下拉

    例题一、子菜单下拉

    <style type="text/css">
    *{ margin:0px auto; padding:0px}
    #menu{ 700px; height:40px; border:1px solid #999; margin-top:30px}
    .list{ 100px; height:40px; text-align:center; line-height:40px; vertical-align:middle; font-size:16px; font-family:微软雅黑; float:left}
    .list:hover{ cursor:pointer; background-color:#63C; color:white}
    .ziwai{0px; height:0px;position:relative; float:left; top:40px; left:-100px}
    .zi{ 100px; height:100px; background-color:#6C3; display:none }//默认下拉都隐藏
    </style>
    </head>
    <body>
    <div id="menu">
      <div class='list' onmouseover="Show('z1')" onmouseout="YinCang()">首页</div>
        <div class="ziwai" >
          <div class="zi" id="z1"></div>
        </div>
      <div class='list' onmouseover="Show('z2')" onmouseout="YinCang()">产品介绍</div>
        <div class="ziwai" >
          <div class="zi" id="z2"></div>
        </div>
      <div class='list' onmouseover="Show('z3')" onmouseout="YinCang()">公司简介</div>
        <div class="ziwai" >
          <div class="zi" id="z3"></div>
        </div>
      <div class='list' onmouseover="Show('z4')" onmouseout="YinCang()">联系我们</div>
        <div class="ziwai" >
          <div class="zi" id="z4"></div>
        </div>
      <div class='list' onmouseover="Show('z5')" onmouseout="YinCang()">新闻动态</div>
        <div class="ziwai" >
          <div class="zi" id="z5"></div>
        </div>
    </div>
    </body>
    <script type="text/javascript">
    function Show(id)
    {
      var attr = document.getElementsByClassName("zi");
    
      for(var i=0; i<attr.length;i++)
      {
        attr[i].style.display = "none";  让所有的子菜单隐藏
      }
      document.getElementById(id).style.display = "block";  让和该菜单关联的子菜单显示
    }
    function YinCang()
    {
      var attr = document.getElementsByClassName("zi");
      for(var i=0; i<attr.length;i++)
      {
        attr[i].style.display = "none";
      }
    }
    </script>
  • 相关阅读:
    Android 源代码在线查看
    Android天气预报程序开发
    为自己的网站写个api接口
    Windows Server 2012改造成Windows8的方法(新增解决网络卡)
    完整java开发中JDBC连接数据库代码和步骤
    RF频偏
    通信系统架构,RF架构
    RF 速率与引导码preamble关系
    ubuntu虚拟机共享无线网上网
    win7下AdHoc网络设置共享外网上网
  • 原文地址:https://www.cnblogs.com/xiaofox0018/p/5899441.html
Copyright © 2011-2022 走看看