题一、左侧菜单下拉

做题思路：先做菜单和子菜单，把子菜单默认隐藏。再用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. WinForm连续点击按钮只打开一次窗体

    许多朋友,学习C#时,制作WinForm小程序总会有一个问题,如果我们在父窗体设置的是点击一个按钮,打开一个子窗体,连续点击总会连续出现一样窗体,可是我们有时只想打开一次窗体,怎么办? 呵呵,我来方法 ...

  2. 微信小程序 功能函数 计时器

    let lovetime = setInterval(function () { let str = '(' + n + ')' + '重新获取' that.setData({ getText2: s ...

  3. ASP.Net MVC+Ibaties架构

    1.配置Ibaties首先在DLL引用中添加Ibaties相关引用:IBatisNet.Common.dll;IBatisNet.Common.Logging.Log4Net.dll;IBatisNe ...

  4. JQuery UI的拖拽功能实现方法小结

    JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...

  5. JS详细图解作用域链与闭包

    JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你 ...

  6. WC2018集训 吉老师的军训练

    WC2018集训 吉老师的军训练 #include<bits/stdc++.h> #define RG register #define IL inline #define _ 20000 ...

  7. POJ2286：The Rotation Game——题解

    http://poj.org/problem?id=2286 题目大意:如图所示有一种玩具,每次可以拉动A-H的开关使得整个行(或列)向字母方向移动一位(如果移动到头的话则到行(列)尾部) 求使得中间 ...

  8. React中的高阶组件，无状态组件，PureComponent

    1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...

  9. poj2409:Let it Bead(置换群 polya定理)

    题目大意:长度为n的项链,要染m种颜色,可以通过旋转或翻转到达的状态视为同一种,问有多少种染色方案. 学了一波polya定理,发现很好理解啊,其实就是burnside定理的扩展. burnside定理 ...

  10. 实例——简单的Samba共享

    服务端配置 # 临时停止iptables service iptables stop # 临时禁用SELinux setenforce 0 # 禁止iptables开机自动启动 chkconfig i ...