9.25 DOM作业
一
<style type="text/css">
*{margin:0px auto; padding:0px; font-family:微软雅黑; font-size:16px}
#cd{ width:100px; margin:30px 0px 0px 30px; background-color:#0FF}
.dh{ width:100px; height:25px; line-height:25px; text-align:center; vertical-align:middle; background-color:#F63; margin-top:2px}
.dh:hover{ cursor:pointer; background-color:#0CC}
.nr{width:100px;}
.fx{width:100px; height:25px; line-height:25px; text-align:center; vertical-align:middle; background-color:#0FF; margin-top:2px}
</style>
</head>
<body>
<div id="cd">
<div class="dh" onclick="show('z1')">首页</div>
<div class="nr" id="z1" style="display:none">
<div class="fx">查看通知</div>
<div class="fx">发送通知</div>
</div>
<div class="dh" onclick="show('z2')">教务信息</div>
<div class="nr" id="z2" style="display:none">
<div class="fx">查看通知</div>
<div class="fx">发送通知</div>
</div>
<div class="dh" onclick="show('z3')">下载专区</div>
<div class="nr" id="z3" style="display:none">
<div class="fx">查看通知</div>
<div class="fx">发送通知</div>
</div>
<div class="dh" onclick="show('z4')">学员信息管理</div>
<div class="nr" id="z4" style="display:none">
<div class="fx">查看通知</div>
<div class="fx">发送通知</div>
</div>
</div>
<script type="text/javascript">
function show(id)
{
var z=document.getElementById(id);
if(z.style.display=="none")
{z.style.display="block"}
else
{z.style.display="none"}
var nr=document.getElementsByClassName("nr");
var n=nr.length;
for(i=0;i<n;i++)
{
if(nr[i]!=z)
{nr[i].style.display="none";}
}
}
</script>
二. 第二题提供两种方法,略有不同,仅做对比:
方法1:
<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:微软雅黑; font-size:16px;}
.f{ width:200px; height:30px; color:white; text-align:center; line-height:30px; vertical-align:middle; margin-top:3px}
.f:hover{ cursor:pointer;}
</style>
</head>
<body>
<div style="width:200px; height:600px; margin-top:30px">
<div class="f" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">张三</div>
<div class="f" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">李四</div>
<div class="f" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">王五</div>
<div class="f" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">赵六</div>
<div class="f" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">马七</div>
</div>
</body>
<script type="text/javascript">
function Xuan(a)
{
var attr = document.getElementsByClassName("f");
for(var i=0;i<attr.length;i++)
{
attr[i].style.backgroundColor = "#63C";
attr[i].setAttribute("xz","0");
}
a.setAttribute("xz","1");
a.style.backgroundColor = "#F63";
}
function Bian(a)
{
var attr = document.getElementsByClassName("f");
for(var i=0;i<attr.length;i++)
{
if(attr[i].getAttribute("xz")=="0")
{
attr[i].style.backgroundColor = "#63C";
}
}
a.style.backgroundColor = "#F63";
}
function Hui(a)
{
var attr = document.getElementsByClassName("f");
for(var i=0;i<attr.length;i++)
{
if(attr[i].getAttribute("xz")=="0")
{
attr[i].style.backgroundColor = "#63C";
}
}
}
</script>
方法2:
*{margin:0px auto; padding:0px; font-family:微软雅黑; font-size:16px}
#list{ width:150px; margin-top:35px;}
.mingzi{ width:150px; height:30px; line-height:30px; text-align:center; vertical-align:middle; background-color:#36F;9 margin-top:3px; border:1px solid #CCC}
.mingzi:hover{ /*background-color:#C93;*/ cursor:pointer}
</style>
</head>
<body>
<h1>好友选择</h1>
<div id="list">
<div class="mingzi" onclick="jh('z1')" onmouseover="bs('z1')" onmouseout="bh('z1')" id="z1" bianliang="0">EI</div>
<div class="mingzi" onclick="jh('z2')" onmouseover="bs('z2')" onmouseout="bh('z2')" id="z2" bianliang="0">ANDY</div>
<div class="mingzi" onclick="jh('z3')" onmouseover="bs('z3')" onmouseout="bh('z3')" id="z3" bianliang="0">JUDY</div>
<div class="mingzi" onclick="jh('z4')" onmouseover="bs('z4')" onmouseout="bh('z4')" id="z4" bianliang="0">FOCUS</div>
<div class="mingzi" onclick="jh('z5')" onmouseover="bs('z5')" onmouseout="bh('z5')" id="z5" bianliang="0">WARNER</div>
</div>
<script type="text/javascript">
function jh(id)
{
var no=document.getElementsByClassName("mingzi");
var n=no.length;
for(i=0;i<n;i++)
{no[i].style.backgroundColor="#36F";
no[i].setAttribute("bianliang",0);
}
document.getElementById(id).style.backgroundColor="#C93";
var a=document.getElementById(id);
a.setAttribute("bianliang",1);
}
function bs(id)
{
document.getElementById(id).style.backgroundColor="#C93";
}
function bh(id)
{ var a=document.getElementById(id);
var pd=a.getAttribute("bianliang");
if(pd==0)
{document.getElementById(id).style.backgroundColor="#36F";}
}
</script>
9.25 DOM作业的更多相关文章
- dom作业
<body> <select size="7" style="width: 200px;" id="slt"> &l ...
- noip第25课作业
1. 求一个有向图所有顶点入度的和 输入有向图的顶点个数,边数以及各顶点之间的关联情况,要求求出这个有向图的所有顶点入度的总和. [输入格式] 第1行:2个空格分开的整数n(2<=n< ...
- 2016/1/25 多线程 作业 方法一 继承Thread 方法二 实现Runnable 多线程笔记
/* * 1,尝试定义一个继承Thread类的类,并覆盖run()方法, * 在run()方法中每隔100毫秒打印一句话.*/ package Stream; //方法一 继承Thread 实现多线程 ...
- 凤翔中学高三数学[备课&作业]
#tab{ font-size:22px ;font-family:楷体;text-align:center;} a:link { text-decoration: none;} 凤中2020届高三文 ...
- syspolicy_purge_history作业故障排除
描述 我们有一台数据库服务器windows 2012 r2 上有安装sql server 2012 和sql server 2016双实例,后续又把sql 2016的服务全部停用,即只保留sql 20 ...
- [BUAA2021软工助教]案例分析作业总结
目录 一.作业链接 二.优秀作业推荐 A+作业推荐 A作业推荐 三.总结 所有案例分析总结 特色与优点 问题与建议 不同类产品案例分析Bug汇总 CSDN问答社区.Stack Overflow.Seg ...
- jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...
- jQuery数据缓存方案详解:$.data()的使用
我们经常使用隐藏控件或者是js全局变量来临时存储数据,全局变量容易导致命名污染,隐藏控件导致经常读写dom浪费性能.jQuery提供了自己的数据缓存方案,能够达到和隐藏控件.全局变量相同的效果,但是j ...
- jquery2源码分析系列
学习jquery的源码对于提高前端的能力很有帮助,下面的系列是我在网上看到的对jquery2的源码的分析.等有时间了好好研究下.我们知道jquery2开始就不支持IE6-8了,从jquery2的源码中 ...
随机推荐
- MVC———用自定义扩展类实现验证
废话少说,直接上图 →_→ NO.1 NO.2 NO.3 NO.4 NO.5 NO.6 NO.7 NO.8 NO.9 NO.10 NO.11 NO.12 NO.13 NO.14 NO.15 NO.16 ...
- 转:PHP中防止SQL注入的方法
[一.在服务器端配置] 安全,PHP代码编写是一方面,PHP的配置更是非常关键. 我们php手手工安装的,php的默认配置文件在 /usr/local/apache2/conf/php.ini,我们最 ...
- linux 下第一个cordova android app
上篇博客写了linux下 cordova + ionic 环境的搭建 , 今天就来做下第一个app的简单讲解吧 首先昨天已经可以通过命令行的方式创建app了.经过今天好一段时间的研究发现使用 ioni ...
- Linux System and Performance Monitoring
写在前面:本文是对OSCon09的<Linux System and Performance Monitoring>一文的学习笔记,主要内容是总结了其中的要点,以及加上了笔者自己的一些理解 ...
- Fragment 与Activity之间的通信
1.Fragment-->Activity 在fragment中的onAttach()中引用Activity实现的接口实例. 2Activity-->Fragment 直接调用 3多个Fr ...
- 最短的可通过编译的C语言程序
要求:写一个最短的,能通过编译的C语言程序,但不要求能正确运行. 一般人首先想到的是除0.即 int main() { /; } 除0会引发SIGFPE信号(浮点异常). 我们也可以删掉return, ...
- [Google Guava]学习--缓存cache
适用性 缓存在很多情况下非常实用.例如,计算或检索一个值的代价很高,并且对同样的输入需要不止一次获取值的时候,就应当考虑使用缓存. Guava Cache与ConcurrentMap很相似,但也不完全 ...
- jquery使用淘宝接口跨域查询手机号码归属地实例
<h1>手机号码归属地查询</h1> <div class="outer"> <p>请输入手机号码</p& ...
- php COOKIE和SESSION的一些理解
web服务器是基于http协议的,而http协议是无状态的,导致任意两个请求之间没有联系.但是我们登录网站后,它却能记住我们的身份,这个过程中一定使用了某个标识来区别我们的身份.对于简单数据传输的我们 ...
- js-读取上传文件后缀
/** * 读取文件后缀名称,并转化成小写 * @param file_name * @returns */ function houzuiToLowerCase(file_name) { if (f ...