<!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. Sublime console installation instructions install Package Control

    instructions: import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1 ...

  2. WPF之TabControl控件用法

    先创建实体基类:NotificationObject(用来被实体类继承) 实现属性更改通知接口: using System; using System.Collections.Generic; usi ...

  3. Hadoop RPC机制

    RPC(Remote Procedure Call Protocol)远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.Hadoop底层的交互都是通过 rp ...

  4. 用PHP与XML进行网站编程

    一.小序 HTML简单易学又通用,一般的PHP程序就是嵌入在HTML语言之中实现的.但是随着WEB越来越广泛的应用,HTML的弱点也越来越明显了.XML的出现,弥补了这些不足,它提供了一个能够处理互联 ...

  5. Template - Strategy

    模板模式是一种基于继承的松耦合模式,其设计思路为,abstract类提供一组接口但不实现,不同concrete类继承同一接口并完成不同功能.如下图所示: 模板模式实现较为简单,TemplateMeth ...

  6. Android实现播放GIF动画的强大ImageView

    我个人是比较喜欢逛贴吧的,贴吧里总是会有很多搞笑的动态图片,经常看一看就会感觉欢乐很多,可以释放掉不少平时的压力.确实,比起一张单调的图片,动态图片明显更加的有意思.一般动态图片都是GIF格式的,浏览 ...

  7. 深入理解linux网络技术-P179

    上锁 net_device结构的组织一节可知,dev_base列表以及dev_name_head和dev_name_index两张hash表由dev_base_list锁保护.然而,该锁只用于对列表和 ...

  8. as3 组件定义

    package kingBook{ import flash.display.MovieClip; import flash.events.Event; import flash.utils.setT ...

  9. 用MyEclipse自动生成hibernate映射文件和实体类

    创建数据库,创建相应的表 点击图标,选择MyEclipse Datebase Explorer 右击空白区域,选择new菜单,根据提示创建数据库连接,创建好后会显示你所创建的连接名,如图mysqldb ...

  10. 阿里云资深DBA专家罗龙九:云数据库十大经典案例分析【转载】

    阿里云资深DBA专家罗龙九:云数据库十大经典案例分析 2016-07-21 06:33 本文已获阿里云授权发布,转载具体要求见文末 摘要:本文根据阿里云资深DBA专家罗龙九在首届阿里巴巴在线峰会的&l ...