题一、左侧菜单下拉

做题思路：先做菜单和子菜单，把子菜单默认隐藏。再用JS调样式。

<style type="text/css">

*{ margin:0px auto; padding:0px}

.text1{ width:180px; height:39px; background-color:rgba(0,59,102,1); border-bottom:1px solid white; text-align:center; line-height:40px; vertical-align:middle; color:white}

.text1:hover{ cursor:pointer}

.text2{ width:160px; height:40px; float:left; font-family:微软雅黑}

.text2:hover{ color:#F00}

.text3{ width:20px; height:40px; float:left; color:white}

.text4{ width:178px; height:40px; text-align:center; line-height:40px; vertical-align:middle; border-left:1px solid #999; border-right:1px solid #999}

.zi{ display:none}//所有的子菜单隐藏

#z33{ border-bottom:1px solid #999}

</style>

</head>

<body>

<div style="width:500px; height:500px">

<div id="shouye" class="text1">

<div class="text2" onclick="Show()">首页</div>

<div class="text3">></div>

</div>

<div id="jiaowu" class="text1"; onclick="Show('z1')">

<div class="text2">教务信息</div>

<div class="text3">></div>

</div>

<div class="zi" id="z1">

<div class="text4">查看通知</div>

<div class="text4">发送通知</div>

</div>

<div id="xiazai" class="text1" ; onclick="Show('z2')">

<div class="text2">下载专区</div>

<div class="text3">></div>

</div>

<div class="zi" id="z2">

<div class="text4">简历文件下载</div>

<div class="text4">教师评测下载</div>

<div class="text4">其它下载</div>

</div>

<div id="xueyuan" class="text1" ; onclick="Show('z3')">

<div class="text2">学员信息管理</div>

<div class="text3">></div>

</div>

<div class="zi" id="z3">

<div class="text4">项目</div>

<div class="text4">考试</div>

<div class="text4" id="z33">作业</div>

</div>

</div>

</body>

<script type="text/javascript">

function Show(id)//用变量id（形参）接收根据接收的变量找到要操作的项。

{

　　var z = document.getElementById(id);//点击主菜单，子菜单显示

　　if(z.style.display=="block")//如果原先子菜单是显示的

　　{

　　　　z.style.display="none";//让原先显示的隐藏

　　}

　　else//如果原先是隐藏的

　　{

　　　　z.style.display="block";//让原先隐藏的显示

　　}

}

</script>

题二、好友列表选中

*{ margin:0px auto; padding:0px}

.text{ width:150px; height:35px; border:2px solid white; background-color:#03F; text-align:center; line-height:30px; vertical-align:middle; color:white}

.text:hover{ cursor:pointer;}<!--用hover改变颜色后面鼠标放上后颜色会无效，下面用的onmouseover变色鼠标放上后的背景色。-->

</style>

</head>

<body>

<div style="width:500px; height:500px; margin-top:30px">

<div class="text" onclick="Show(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">唐僧</div>

<div class="text" onclick="Show(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">孙悟空</div>

<div class="text" onclick="Show(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">猪八戒</div>

<div class="text" onclick="Show(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">沙僧</div>

</div>

</body>

<script type="text/javascript">

function Show(a)//用一个形参接收变量

{

　　var attr = document.getElementsByClassName("text");//找到所有的好友

　　for(i=0;i<attr.length;i++)

　　{

　　　　attr[i].style.backgroundColor="#63C";//先背景色设置为是默认的颜色，防止点击一个之前点击更换的背景色不变回默认的颜色。

　　　　attr[i].setAttribute("xz","0");//清别的选项的背景色，设置为0.

　　}

　　a.setAttribute("xz","1");//代表选中，设置为1.

　　a.style.backgroundColor="#F63";//点击换背景色

}

function Bian(a)//鼠标放上以后背景色改变,但是原先鼠标选定的背景颜色会改变成默认颜色。

{

　　var attr = document.getElementsByClassName("text");

　　for(i=0;i<attr.length;i++)

　　{

　　　　if(attr[i].getAttribute("xz")=="0")//要在前面加上xz的属性，默认等于0。

　　　　{

　　　　　　attr[i].style.backgroundColor="#63C";

　　　　}

　　}

　　a.style.backgroundColor="#F63";

}

function Hui(a)//鼠标离开后颜色返回默认颜色

{

　　var attr = document.getElementsByClassName("text");

　　for(i=0;i<attr.length;i++)

　　{

　　　　if(attr[i].getAttribute("xz")=="0")

　　　　attr[i].style.backgroundColor="#63C";

　　}

}

</script>

JS练习题（左侧菜单下拉+好友选中）的更多相关文章

  1. js,jquery获取下拉框选中的option

    js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...

  2. JS之document例题讲解1（两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结）

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  3. 原生js实现一个自定义下拉单选选择框

    浏览器自带的原生下拉框不太美观,而且各个浏览器表现也不一致,UI一般给的下拉框也是和原生的下拉框差别比较大的,这就需要自己写一个基本功能的下拉菜单/下拉选择框了.最近,把项目中用到的下拉框组件重新封装 ...

  4. 在Mockplus中，如何做鼠标悬停时菜单下拉的效果？

    了解Mockplus的用户会知道,该原型工具目前并不直接支持鼠标悬停功能.但我经过尝试,发现想用它实现一个鼠标悬停事件并不是什么难事,比如网页设计中很常见的鼠标悬停时菜单下拉的效果,只要换个思路,利用 ...

  5. js&jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...

  6. 9月23日JavaScript作业----子菜单下拉

    例题一.子菜单下拉 <style type="text/css"> *{ margin:0px auto; padding:0px} #menu{ width:700p ...

  7. css配合js模拟的select下拉框

    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  8. JS年月日三级联动下拉框日期选择代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. LayUI中select下拉框选中触发事件

    代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...

随机推荐

  1. lintcode-42-最大子数组 II

    42-最大子数组 II 给定一个整数数组,找出两个 不重叠 子数组使得它们的和最大. 每个子数组的数字在数组中的位置应该是连续的. 返回最大的和. 注意事项 子数组最少包含一个数 样例 给出数组 [1 ...

  2. TCP系列33—窗口管理&流控—7、Silly Window Syndrome(SWS)

    一.SWS介绍 前面我们已经通过示例看到如果接收端的应用层一直没有读取数据,那么window size就会慢慢变小最终可能变为0,此时我们假设一种场景,如果应用层读取少量数据(比如十几bytes),接 ...

  3. TCP系列18—重传—8、FACK及SACK reneging下的重传

    一.介绍 FACK的全称是forward acknowledgement,FACK通过记录SACK块中系列号最大(forward-most)的SACK块来推测丢包信息,在linux中使用fackets ...

  4. ZOJ 1229 M-Gift?!

    https://vjudge.net/contest/67836#problem/M There is a beautiful river in a small village. N rocks ar ...

  5. Jenkins系列-Jenkins插件下载镜像加速

    可供选择的jenkins2 插件镜像列表: Jenkins 所有镜像列表: http://mirrors.jenkins-ci.org/status.html比如日本的镜像: http://mirro ...

  6. 关闭win7/Server 2008非正常关机启动自动修复功能

    命令提示符下输入 bcdedit /set {default} bootstatuspolicy ignoreallfailures bcdedit /set {current} recoveryen ...

  7. 第29天：js-数组添加删除、数组和字符串相互转换

    一.添加数组var arr=[1,3,5];arr.push(7,9);//添加7和9到数组arr后面,得到[1,3,5,7,9]1.push();可向数组末尾添加一个或多个元素,并返回新的长度.2. ...

  8. RT-thread内核之对象管理系统

    一.数据结构 1.对象控制块:在include/rtdef.h中定义 /** * Base structure of Kernel object */ struct rt_object { char ...

  9. tcp协议的六个标识位

    6个标识位: URG 紧急指针,告诉接收TCP模块紧要指针域指着紧要数据. ACK 置1时表示确认号(为合法,为0的时候表示数据段不包含确认信息,确认号被忽略. PSH 置1时请求的数据段在接收方得到 ...

  10. （八）Redis事务与连接操作

    事务: multi # 标记一个事务块的开始.事务块内的多条命令会按照先后顺序被放进一个队列当中,最后由EXEC命令原子性地执行 exec # 执行所有事务块内的命令 descard # 取消事务,放 ...