一
<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作业的更多相关文章

  1. dom作业

    <body> <select size="7" style="width: 200px;" id="slt"> &l ...

  2. noip第25课作业

    1.   求一个有向图所有顶点入度的和 输入有向图的顶点个数,边数以及各顶点之间的关联情况,要求求出这个有向图的所有顶点入度的总和. [输入格式] 第1行:2个空格分开的整数n(2<=n< ...

  3. 2016/1/25 多线程 作业 方法一 继承Thread 方法二 实现Runnable 多线程笔记

    /* * 1,尝试定义一个继承Thread类的类,并覆盖run()方法, * 在run()方法中每隔100毫秒打印一句话.*/ package Stream; //方法一 继承Thread 实现多线程 ...

  4. 凤翔中学高三数学[备课&作业]

    #tab{ font-size:22px ;font-family:楷体;text-align:center;} a:link { text-decoration: none;} 凤中2020届高三文 ...

  5. syspolicy_purge_history作业故障排除

    描述 我们有一台数据库服务器windows 2012 r2 上有安装sql server 2012 和sql server 2016双实例,后续又把sql 2016的服务全部停用,即只保留sql 20 ...

  6. [BUAA2021软工助教]案例分析作业总结

    目录 一.作业链接 二.优秀作业推荐 A+作业推荐 A作业推荐 三.总结 所有案例分析总结 特色与优点 问题与建议 不同类产品案例分析Bug汇总 CSDN问答社区.Stack Overflow.Seg ...

  7. jQuery源码分析系列

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...

  8. jQuery数据缓存方案详解：$.data()的使用

    我们经常使用隐藏控件或者是js全局变量来临时存储数据,全局变量容易导致命名污染,隐藏控件导致经常读写dom浪费性能.jQuery提供了自己的数据缓存方案,能够达到和隐藏控件.全局变量相同的效果,但是j ...

  9. jquery2源码分析系列

    学习jquery的源码对于提高前端的能力很有帮助,下面的系列是我在网上看到的对jquery2的源码的分析.等有时间了好好研究下.我们知道jquery2开始就不支持IE6-8了,从jquery2的源码中 ...

随机推荐

  1. Java序列化中的SerialVersionUid

    版权声明:本文为博主fbysss原创文章,转载请注明出处 作者:fbysssmsn:jameslastchina@hotmail.com  blog:blog.csdn.NET/fbysss声明:本文 ...

  2. C语言输入输出整数

    scanf("%llu", &x); printf("%llu\n", x); scanf("%u", &x); print ...

  3. UITextView的使用详解

    //初始化并定义大小 UITextView *textview = [[UITextView alloc] initWithFrame:CGRectMake(20, 10, 280, 30)]; te ...

  4. Okio 1.9简单入门

    Okio 1.9简单入门 Okio库是由square公司开发的,补充了java.io和java.nio的不足,更加方便,快速的访问.存储和处理你的数据.而OkHttp的底层也使用该库作为支持. 该库极 ...

  5. ubuntu eclipse 不能新建javaweb项目解决方案

    ubuntu下,通过sudo apt-get install eclipse 成功安装了eclipse,可它简洁的都让我不知如何新建web project.网上查了众多资料,终于找到了一系列简洁的方法 ...

  6. (function($, window, document) {}) jQuery 调用解决与其他javascript库冲突的写法

    将函数包在红色字体内部,可以解决$符号与其他插件的冲突. <script type="text/javascript"> (function($, window, do ...

  7. Intellij 常用快捷键

    Project [Alt+1]Version Control [Alt+9]Run [Ctrl+Shift+F10]Debug [Ctrl+Shift+F11]Terminal [Alt+F12]Ed ...

  8. HTTP 405 错误 – 方法不被允许 (Method not allowed)

    HTTP 协议定义一些方法,以指明为获取客户端(如您的浏览器或我们的 CheckUpDown 机器人)所指定的具体网址资源而需要在 Web 服务器上执行的动作.则这些方法如下: 介绍 OPTIONS( ...

  9. js-格式化数字保留两位小数-带千分符

    很多时候发现有时候js会提示自带函数不能使用,所以自己找了很多资料实现了个 html <input type="text" class="input_text in ...

  10. NGUI之输入文本框的使用

    ToolBar中的两个红圈 另,代码如下:只需要定义一个变量即可,然后将控件drag到那里,真的是灰常方便呀 还有一个就是保存了(OK的响应),可以简单地理解为存档或读档