例题一、子菜单下拉

<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. python基础--基本数据类型考试_day3

    1.执行 Python 脚本的两种方式 终端和交互模式 法1:python helloword.py 法2:ps: 执行前需给预chmod 755 helloword.py (linux系统中)./h ...

  2. 导入dmp文件时的注意事项

    来源于:http://bbs.csdn.net/topics/350167817 --1表空间 CREATE TABLESPACE newjw DATAFILE 'E:\oracle_data\new ...

  3. 使用D3绘制图表（5）--水平柱状图表

    绘制水平柱状图表的方法也不是很难,首先在svg中插入g,然后在g中插入rect. 1.html代码 <!DOCTYPE html> <html> <head> &l ...

  4. Struts2.3.4.1+Spring3.2.3+Hibernate4.1.9整合

    java教程|Struts2.3.4.1+Spring3.2.3+Hibernate4.1.9整合教程并测试成功一．创建项目二．搭建struts-2.3.4.11.struts2必须的Jar包(放到W ...

  5. Shell脚本_启动停止重启sh脚本

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  6. Linux_虚拟机_安装VMware Tools

    以root用户执行,否则可能会出现权限不足,无法执行的情况 一.点击安装Vmware Tools   二.拖动安装文件到桌面并解压   三.双击并[在终端中运行]   四.根据提示回车或输入yes   ...

  7. Havel-Hakimi定理

    s是指所有点的度数:由非负整数组成的非增序列s:d1,d2,d3.....,dn(n>=2,d1>=1)是可图的(即能构成图)当且仅当s1:d2-1,d3-1,...dn;是可图的:例如: ...

  8. 100114H

    模拟 #include<iostream> #include<Cstdio> using namespace std; int n,k; ]; ][]; int main() ...

  9. 【hdu 5918】Sequence I（KMP）

    给定两个数字序列,求a序列中每隔p个构成的p+1个序列中共能匹配多少个b序列. 例如1 1 2 2 3 3 每隔1个的序列有两个1 2 3 kmp,匹配时每次主串往前p个,枚举1到p为起点. 题目 # ...

  10. [日常训练]常州集训day5

    T1 Description 小$W$和小$M$一起玩拼图游戏啦~ 小$M$给小$M$一张$N$个点的图,有$M$条可选无向边,每条边有一个甜蜜值,小$W$要选$K$条边,使得任意两点间最多有一条路径 ...