<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

#cd1{ width:100px; height:175px; background-color:#900; color:#0F0; text-align:center; vertical-align:middle; line-height:35px; }

#cd2{ width:100px; height:175px; background-color:#900; color:#0F0; text-align:center; vertical-align:middle; line-height:35px; }

#cd3{ width:100px; height:175px; background-color:#900; color:#0F0; text-align:center; vertical-align:middle; line-height:35px; }

#a1{ width:100px; height:35px; background-color:#0F0; text-align:center; vertical-align:middle; line-height:34px; border:1px solid #000;}

#a2{ width:100px; height:35px; background-color:#0F0; text-align:center; vertical-align:middle; line-height:34px; border:1px solid #000;}

</style>

</head>

<body>

    <div style=" width:100px; height:35px;  color:#0F0; text-align:center; vertical-align:middle; line-height:35px;" onclick="xiala()">首页</div>

    <div id="cd1" style=" display:none">

    <div>企业介绍</div>

    <div>产品介绍</div>

    <div>产品中心</div>

    <div>服务中心</div>

    <div>联系我们</div>

    </div>

    <div style=" width:100px; height:35px;  color:#0F0; text-align:center; vertical-align:middle; line-height:35px;" onclick="xiala2()">企业介绍</div>

    <div id="cd2" style=" display:none">

    <div>产品介绍</div>

    <div>产品中心</div>

    <div>服务中心</div>

    <div>联系我们</div>

    </div>

    <div style=" width:100px; height:35px;  color:#0F0; text-align:center; vertical-align:middle; line-height:35px;" onclick="xiala3()">产品中心</div>

    <div id="cd3" style=" display:none">

    <div>产品介绍</div>

    <div>产品中心</div>

    <div>服务中心</div>

    <div>联系我们</div>

    </div>

<br />

<br />

<br />

<!--<div style="width:600px; height:35px; border:1px solid #000; text-align:center; vertical-align:middle; line-height:35px; color:#F00;">-->

    <div id="a1" style="overflow:hidden" onmouseover="chuxian()" onmouseout="yincang()">

    <div id="a2">产品介绍</div>

    <div id="a2">产品中心</div>

    <div id="a2">企业介绍</div>

    <div id="a2">联系我们</div>

    </div>

</div>

</body>

</html>

<script type="text/jscript">

function xiala(a)

{

    var a = document.getElementById("cd1");

    var str="none";

    if(str.indexOf(a.style.display)>=0)

    {

    a.style.display="block";

    }

    else(a.style.display="none")

}

function xiala2()

{

    var a = document.getElementById("cd2");

    var str="none";

    if(str.indexOf(a.style.display)>=0)

    {

    a.style.display="block";

    }

    else a.style.display="none";

}

function xiala3()

{

    var a = document.getElementById("cd3");

    var str="none";

    if(str.indexOf(a.style.display)>=0)

    {

    a.style.display="block";

    }

    else a.style.display="none";

}

function chuxian()

{

    var a = document.getElementById("a1");

    a.removeAttribute("style");

}

function yincang()

{

    var a = document.getElementById("a1");

    a.setAttribute("style","overflow:hidden");

}

</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. 省市便利 UIPicherView

    @property (strong,nonatomic) UIPickerView *pickerV; @property (strong,nonatomic) NSArray *arr; @prop ...

  2. iOS开发 GET、POST请求方法：NSURLSession篇

    NSURLConnection,在iOS 9被宣布弃用,本文不使用NSURLConnection进行网络编程,有兴趣的童鞋可以参考: iOS开发 GET.POST请求方法(NSURLConnectio ...

  3. 【转】RestQL：现代化的 API 开发方式

    原文:http://tech.meituan.com/koa-restql.html RestQL:现代化的 API 开发方式 李鑫 ·2016-08-12 11:26 koa-restql 已经在  ...

  4. OpenGL———混合的基本知识

    混合是一种常用的技巧,通常可以用来实现半透明.但其实它也是十分灵活的,你可以通过不同的设置得到不同的混合结果,产生一些有趣或者奇怪的图象.混合是什么呢?混合就是把两种颜色混在一起.具体一点,就是把某一 ...

  5. cell reuse & disposebag

    For my project I've made base cell class TableViewCell: UITableViewCell { private(set) var disposeBa ...

  6. Top 100 Best Blogs for iOS Developers

    (by JP Zhang | Last updated: Apr 5, 2016 )  转载自:http://www.softwarehow.com/best-blogs-for-ios-develo ...

  7. margin叠加相邻两个元素的上下margin是叠加在一起

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  8. HDU2199,HDU2899,HDU1969,HDU2141--（简单二分）

    二分是一种很有效的减少时间开销的策略, 我觉得单列出二分专题有些不太合理, 二分应该作为一中优化方法来考虑 这几道题都是简单的使用了二分方法优化, 二分虽然看似很简单, 但一不注意就会犯错. 在写二分 ...

  9. HDU2216:Game III(BFS)

    Game III Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Subm ...

  10. JSP 语法/标签

    ┣1.declaration Declaration定义了JSP脚本语言使用的变量和函数,这类似于Java中定义全局变量,或可以把它想像成pascal编程语言中的单元文件的interface部分.声明 ...