<!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. LightOJ 1370 Bi-shoe and Phi-shoe 数论

    题目大意:f(x)=n 代表1-x中与x互质的数字的个数.给出n个数字a[i],要求f(x)=a[i],求x的和. 思路:每个素数x 有x-1个不大于x的互质数.则f(x)=a[i],若a[i]+1为 ...

  2. Python定制类

    https://docs.python.org/3/reference/datamodel.html#special-method-names

  3. json对象的简单介绍

    1.JSON(JavaScript Object Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任 ...

  4. iOS项目架构 小谈

    层级结构,自底向上 持久层(File,Realm,SQLite)<==>网络层(相信每个公司都有自己的网络层吧)==>业务层(ViewModel)==>展示层(View,VC) ...

  5. [转]探究java IO之FileInputStream类

    使用FileInputStream类创建的InputStream对象可以用于从文件读取内容.两个常用的构造函数如下所示: ? 1 2 FileInputStream(String filePath) ...

  6. HDU1114--Piggy-Bank(完全背包变形)

    Piggy-Bank   Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...

  7. ubuntu服务器移植步骤

    1.安装LAMP套件 1 tasksel 2.安装FTP工具 http://www.cnblogs.com/esin/p/3483646.html 3.安装PHPMyAdmin 1)安装 1 apt- ...

  8. 分享一款CSS框架

    1.http://bulma.io/documentation/elements 2.支持IE9+ 3.内容:

  9. Html基础详解之（jquery）之二

    on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数.on()方法绑定时间处理程序到当前选定的jQuery对象中的元素.在jQuery 1.7中 ...

  10. CF 476 div2 C

    http://www.codeforces.com/contest/476/problem/C   C. Dreamoon and Sums time limit per test 1.5 secon ...