1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style>
  7. #cd1{ width:100px; height:175px; background-color:#900; color:#0F0; text-align:center; vertical-align:middle; line-height:35px; }
  8. #cd2{ width:100px; height:175px; background-color:#900; color:#0F0; text-align:center; vertical-align:middle; line-height:35px; }
  9. #cd3{ width:100px; height:175px; background-color:#900; color:#0F0; text-align:center; vertical-align:middle; line-height:35px; }
  10. #a1{ width:100px; height:35px; background-color:#0F0; text-align:center; vertical-align:middle; line-height:34px; border:1px solid #000;}
  11. #a2{ width:100px; height:35px; background-color:#0F0; text-align:center; vertical-align:middle; line-height:34px; border:1px solid #000;}
  12.  
  13. </style>
  14. </head>
  15.  
  16. <body>
  17.  
  18.     <div style=" width:100px; height:35px;  color:#0F0; text-align:center; vertical-align:middle; line-height:35px;" onclick="xiala()">首页</div>
  19.  
  20.     <div id="cd1" style=" display:none">
  21.     <div>企业介绍</div>
  22.     <div>产品介绍</div>
  23.     <div>产品中心</div>
  24.     <div>服务中心</div>
  25.     <div>联系我们</div>
  26.     </div>
  27.  
  28.     <div style=" width:100px; height:35px;  color:#0F0; text-align:center; vertical-align:middle; line-height:35px;" onclick="xiala2()">企业介绍</div>
  29.  
  30.     <div id="cd2" style=" display:none">
  31.     <div>产品介绍</div>
  32.     <div>产品中心</div>
  33.     <div>服务中心</div>
  34.     <div>联系我们</div>
  35.     </div>
  36.  
  37.     <div style=" width:100px; height:35px;  color:#0F0; text-align:center; vertical-align:middle; line-height:35px;" onclick="xiala3()">产品中心</div>
  38.  
  39.     <div id="cd3" style=" display:none">
  40.     <div>产品介绍</div>
  41.     <div>产品中心</div>
  42.     <div>服务中心</div>
  43.     <div>联系我们</div>
  44.     </div>
  45.  
  46. <br />
  47. <br />
  48. <br />
  49. <!--<div style="width:600px; height:35px; border:1px solid #000; text-align:center; vertical-align:middle; line-height:35px; color:#F00;">-->
  50.     <div id="a1" style="overflow:hidden" onmouseover="chuxian()" onmouseout="yincang()">
  51.     <div id="a2">产品介绍</div>
  52.     <div id="a2">产品中心</div>
  53.     <div id="a2">企业介绍</div>
  54.     <div id="a2">联系我们</div>
  55.     </div>
  56. </div>
  57. </body>
  58. </html>
  59. <script type="text/jscript">
  60. function xiala(a)
  61. {
  62.     var a = document.getElementById("cd1");
  63.     var str="none";
  64.     if(str.indexOf(a.style.display)>=0)
  65.     {
  66.     a.style.display="block";
  67.     }
  68.     else(a.style.display="none")
  69.  
  70. }
  71.  
  72. function xiala2()
  73. {
  74.     var a = document.getElementById("cd2");
  75.     var str="none";
  76.     if(str.indexOf(a.style.display)>=0)
  77.     {
  78.     a.style.display="block";
  79.     }
  80.     else a.style.display="none";
  81. }
  82.  
  83. function xiala3()
  84. {
  85.     var a = document.getElementById("cd3");
  86.     var str="none";
  87.     if(str.indexOf(a.style.display)>=0)
  88.     {
  89.     a.style.display="block";
  90.     }
  91.     else a.style.display="none";
  92. }
  93.  
  94. function chuxian()
  95. {
  96.     var a = document.getElementById("a1");
  97.     a.removeAttribute("style");
  98. }
  99.  
  100. function yincang()
  101. {
  102.     var a = document.getElementById("a1");
  103.     a.setAttribute("style","overflow:hidden");
  104. }
  105. </script>

11.10document对象练习的更多相关文章

  1. redis 系列11 列表对象

    一. 列表对象概述 Redis列表是简单的字符串列表,按照插入顺序排序.你可以添加一个元素到列表的头部(左边)或者尾部(右边).一个列表最多可以包含 232 - 1 个元素 (4294967295, ...

  2. ES6躬行记（11）——对象

    在第5篇中,讲解了多个对象字面量的改进,本节将重点介绍两个新增的静态方法,以及对象属性的重复处理和枚举顺序. 一.Object.is() 此方法用于判断两个值是否相同,内部实现了SameValue算法 ...

  3. Day 11 函数对象，函数嵌套，作用域，闭包

    函数总结 # 函数的定义:def func(a, b):    print(a, b)    return a + b​​# 函数四个组成部分# 函数名:调用函数的依据,必须的# 函数体:执行函数逻辑 ...

  4. python --- 11 第一类对象 函数名 闭包 迭代器

    一 .函数名的运用    ①函数名是⼀个变量, 但它是⼀个特殊的变量, 与括号配合可以执⾏函数的变量 ②函数名是一个内存地址    ③ 函数名可以赋值给其他变量         ④函数名可以当做容器类 ...

  5. python之路---11 第一类对象 函数名 闭包 迭代器

    二十九. 1.函数名的运用    ①函数名是⼀个变量, 但它是⼀个特殊的变量, 与括号配合可以执⾏函数的变量 ②函数名是一个内存地址    ③ 函数名可以赋值给其他变量         ④函数名可以当 ...

  6. JavaScript高级 面向对象（11）--对象的动态特性-关联数组用法

    说明(2017.4.2): 1. 对象的动态特性: (1)在js中,一个对象需要属性,就可以利用“对象名.属性 = 值”的方式为其添加,只要赋值成功,对象就新增这个属性. (2)对象属性的访问形式: ...

  7. C++解析(11)：对象的构造

    0.目录 1.对象的初始化 2.构造函数 3.无参构造函数与拷贝构造函数 4.小结 1.对象的初始化 对象中成员变量的初始值是多少? 下面的类定义中成员变量i和j的初始值是什么? 从程序设计的角度,对 ...

  8. 【VBA编程】11.Application对象

    Application对象常用属性[ActiveCell属性]ActiveCell属性返回一个Range对象,表示当前窗口或指定窗口中的单元格.如果窗口没显示工作表,则此属性无效.[代码区域] Sub ...

  9. 11 Reponse对象+ServletContext对象

    1.HTTP协议: (1)请求消息:客户端发送给服务器端的数据 数据格式: 1. 请求行 2. 请求头 3. 请求空行 4. 请求体 (2)响应消息:服务器端发送给客户端的数据 * 数据格式: 1. ...

随机推荐

  1. Greedy Change

    Greedy Change time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  2. .bash_profile和.bashrc的什么区别

    /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行.并从/etc/profile.d目录的配置文件中搜集shell的设置./etc/bashrc:为每一个运 ...

  3. Notes over compiling..

    When compiling VIM on windows, using nmake may be a better choice.. Because so far my attempts to co ...

  4. static方法与非static方法是否可以互相调用

    情况一.static方法调用非static方法 非静态方法只有实例对象才可调用,而静态方法随着类的加载而加载,类的加载在实例对象产生之前,所以静态方法不能调用非静态方法 情况二.非atic方法调用st ...

  5. HDU 1698 <线段树，区间set>

    题目连接 题意: 一条长为N的铜链子,每个结点的价值为1.有两种修改,l,r,z; z=2:表示把[l,r]区间内链子改为银质,价值为2. z=3:表示把[l,r]区间内链子改为金质,价值为3. 思路 ...

  6. php sso 单点登录的实现 代码示例

    先说一下这样做的好处吧,先来三个屌丝域名: www.openpoor.com myspace.openpoor.com passport.openpoor.com 大家都知道,虽然他们都是一个域名但主 ...

  7. Element type "bean" must be followed by either attribute specifications, ">" or "/>".

    在这里其他内容就省了,错在,<bean id="bpcsU1gblDAO"class="dao.jk.bpcs.impl.BpcsU1gblDaoImpl" ...

  8. 关于在jsp中的表达式

    列子: <%List<F_dd_tourist_info_markup> tourists = (List<F_dd_tourist_info_markup>) requ ...

  9. useradd adduer 的区别

    区别 1). 使用useradd时,如果后面不添加任何参数选项,例如:#sudo useradd test创建出来的用户将是默认“三无”用户:一无Home Directory,二无密码,三无系统She ...

  10. CentOS 单用户登录&命令行、图像界面

    如何单用户登录: 这是一个很简单的问题,以前没重视,每次linux服务器无法正常启动时,都找应急盘,想偷懒,反而浪费了时间. 今天备忘如下: 1.系统启动时,按光标键调出GRUB引导菜单. 2.选定一 ...