例题一、子菜单下拉

<style type="text/css">

*{ margin:0px auto; padding:0px}

#menu{ width:700px; height:40px; border:1px solid #999; margin-top:30px}

.list{ width: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{width:0px; height:0px;position:relative; float:left; top:40px; left:-100px}

.zi{ width: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>

9月23日JavaScript作业----子菜单下拉的更多相关文章

  1. 9月23日JavaScript作业----日期时间选择

    作业二:日期时间选择 <div style="width:600px; height:100px;"> <select id="year"&g ...

  2. 9月23日JavaScript作业----用DIV做下拉列表

    例题二.用div做下拉列表 <title>无标题文档</title> <style type="text/css"> *{ margin:0px ...

  3. 9月23日JavaScript作业----两个列表之间移动数据

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  4. JS之document例题讲解1（两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结）

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  5. 5月23日 JavaScript

    一.JavaScript简介 1.JavaScript是什么: 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它的用法: 在HTML中位置有三块: (1)head里面 (2)bod ...

  6. 5月23日 JavaScript练习：累加求和

    第一种方法: 第二种方法:

  7. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  8. Week16（12月23日）：复习

    Part I:提问 =========================== 1.声明强类型视图时,使用关键字(    ) A.ViewBag    B.model    C.Type    D.Tit ...

  9. 11月23日《奥威Power-BI报表集成到其他系统》腾讯课堂开课啦

    听说明天全国各地区都要冷到爆了,要是天气冷到可以放假就好了.想象一下大冷天的一定要在被窝里度过才对嘛,索性明天晚上来个相约吧,相约在被窝里看奥威Power-BI公开课如何?        上周奥威公开 ...

随机推荐

  1. linux 下配置 nodejs+ionic+cordova

    ionic是目前比较火的hybird框架学的人挺多所以资料会相对全一些. cordova是一个连接ionic和原生android 底层api的工具.(这样说好理解一些,不过可能不够准确.) 用他们的好 ...

  2. Beta版本冲刺———第二天

    会议照片: 项目燃尽图: 1.项目进展: 昨天的困难:分数排行榜的设计 今天解决的进度:完成了界面优化以及建立新的排行榜选项卡界面. 明天要做的事情:分数排行榜的功能设计 2.每个人每天做的事情 郭怡 ...

  3. 用一条sql语句显示数据百分比并加百分号

    来源于:http://neil-han.iteye.com/blog/1948124 求数值所占比重 关键点:(round(t1.cnt/t2.totalCount*100,2))||'%'

  4. mybatis执行批量更新batch update 的方法

    1.数据库连接必须配置:&allowMultiQueries=true 我的配置如下:jdbc:mysql://10.20.13.16:3306/CALENDAR?useUnicode=tru ...

  5. 前博客 http://bbs.landingbj.com/mytopic.jsp?action=mytopic&username=57071

    在工作学习的过程中,遇到了亮眼的技术点,或者 学习的心得体会,总想要记录下来,或是方便自己,或是帮助如同自己现在这般的新人.前人种树,后人乘凉.享受了前人留下的阴凉,也会考虑自己给后来者种下几棵树苗. ...

  6. 100803C

    画个图,很容易发现少兜圈子,就是说这些限制c[i],d[i]可以看做[c[i],d[i]],不让那些区间相交,然后就可以了 #include<iostream> #include<c ...

  7. 用C#制作推箱子小游戏

    思路分析: 一.制作一个地图 二.地图中放置墙.箱子.人.目标等 三.让小人动起来完成推箱子动作 游戏制作: 1.按照上述地图制作一个地图  (12行×13列) 地图可以看做是行和列组成的,即可以看做 ...

  8. Visual Studio 2015正式版/产品密钥

    Visual Studio 2015  发行说明: https://visualstudio.com/zh-cn/news/vs2015-vs.aspx Visual Studio  2015 特性简 ...

  9. RunLoop的深入了解

    RunLoop 是 iOS 和 OS X 开发中非常基础的一个概念,这篇文章将从 CFRunLoop 的源码入手,介绍 RunLoop 的概念以及底层实现原理.之后会介绍一下在 iOS 中,苹果是如何 ...

  10. 【matlab】输出固定位数的数字

    有时候需要集中处理数字,比如处理图片,并将它们编号为000001~009963 而matlab用fprintf输出时这些数字编号时,需要指定格式: %.nd n表示n位长度.%d表示10进制数字 e. ...