题一、左侧菜单下拉

做题思路：先做菜单和子菜单，把子菜单默认隐藏。再用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. HashCode和equals的理解

    -------------------------------------------------------------------------------------------第一篇博客---- ...

  2. 【Redis】- 总结精讲

    本文围绕以下几点进行阐述 1.为什么使用redis2.使用redis有什么缺点3.单线程的redis为什么这么快4.redis的数据类型,以及每种数据类型的使用场景5.redis的过期策略以及内存淘汰 ...

  3. Java取两个变量不为空的变量的简便方法！

    一.需求 最近在项目中遇到一个小问题,即从数据库取两个变量,判断取出的变量是否为空,取不为空的变量:若两个变量都不为空,取两个变量:两个变量都为空,则跳过: 二.解决方案(这里提供两种思路) 1.第一 ...

  4. cmd批处理中set /a和set /p的区别介绍

    在 SET 命令中添加了两个新命令行开关: SET /A expression SET /P variable=[promptString]/p 是让你输入/a 是指定一个变量等于一串运算字符 什么参 ...

  5. Sparse autoencoder implementation 稀疏自编码器实现

    任务:在这个问题中,你将实现稀疏自编码器算法,并且展示它怎么发现边缘是自然图像的一个好的表示. 在文件 sparseae_exercise.zip中,我们已经提供了一些Matlab中的初始代码,你应该 ...

  6. BZOJ 2306 幸福路径(DP)

    题解来源:http://www.cnblogs.com/jianglangcaijin/p/3799494.html 最后必然是走了一条链,或者是一个环(一直绕),或者是一条链加一个环.设f[i][j ...

  7. BZOJ 1179 Atm(强连通分量缩点+DP)

    题目说可以通过一条边多次,且点权是非负的,所以如果走到图中的一个强连通分量,那么一定可以拿完这个强连通分量上的money. 所以缩点已经很明显了.缩完点之后图就是一个DAG,对于DAG可以用DP来求出 ...

  8. BZOJ4289 PA2012Tax（最短路）

    一个暴力的做法是把边看成点,之间的边权为两边的较大权值,最短路即可.但这样显然会被菊花图之类的卡掉. 考虑优化建图.将边拆成两个有向边,同样化边为点.原图中同一条边在新图中的两个点之间连边权为原边权的 ...

  9. A表数据插入到B表（表结构不一致）

    D_A  有E\F\H 3字段 D_B 有 A\B\C\D\E\ID 字段 将 D_B 个别字段插入到D_A  表 INSERT INTO  D_A(E,F,H) select B,A,ID from ...

  10. 【题解】51nod 1685第K大区间2

    二分答案+++++++(｡･ω･｡) 感觉这个思路好像挺常用的:求第\(K\) 大 --> 二分第 \(K\) 大的值 --> 检验当前二分的值排名是第几.前提:排名与数值大小成单调性变化 ...