<!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. 使WiFi具有保存历史连接的功能

    在wpa_supplicant.conf里面添加这个功能 update_config=1 就能更新了,保存了历史的连接AP,不用再输入密码

  2. Mybatis——helloWorld级程序

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC & ...

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

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

  4. mysql主从数据库

    Mysql主从配置,实现读写分离 大型网站为了软解大量的并发访问,除了在网站实现分布式负载均衡,远远不够.到了数据业务层.数据访问层,如果还是传统的数据结构,或者只是单单靠一台服务器扛,如此多的数据库 ...

  5. java应用测试报告生成(一): sonarqube配合Jenkins生成测试报告及覆盖率

    环境准备: 1.Jenkins集成环境(安装 sonarqube插件) 2.安装sonarqube服务(下载sonarqube安装包并解压,目录到"sonarqube-5.4/bin/lin ...

  6. HDU 2802 F(N) 数论+打表

    题目大意:f[n]-n^3=f[n-2]-(n-1)^3 (n >=3),f[1]=1,f[2]=7,求f[n]. 题目思路:将n^3移到到等式右边化简的到:f[n]=f[n-2]+3n*(n- ...

  7. tab奇偶行颜色交替+插件

    (function($){ $.fn.tableUI=function(options){ var defaults={ evenRowclass:"evenRow", oddro ...

  8. ARC属性中还能使用assign，copy，retain这些关键字吗

    http://blog.sina.com.cn/s/blog_6531b9b80101c6cr.html      很早以前比较弱,网上不知道哪里看了篇博文,留下了ARC属性中不能使用retain关键 ...

  9. Listview和checkbox多选

    在Android某些开发需求当中,有时候需要在listveiw中加入checkbox实现单选,多选操作.表面上看上去只是改变checkbox那么简单,然而实际开发中,实现起来并不是那么得心应手.尤其当 ...

  10. 在Activity之间使用Intent传值和Bundle传值的区别和方式

    两者本质上没有任何区别.Bundle只是一个信息的载体 将内部的内容以键值对组织 Intent负责Activity之间的交互 自己是带有一个Bundle的Intent.putExtras(Bundle ...