题一、左侧菜单下拉

做题思路：先做菜单和子菜单，把子菜单默认隐藏。再用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. android在程序崩溃时Catch异常并处理

    Android系统的"程序异常退出",给应用的用户体验造成不良影响.为了捕获应用运行时异常并给出友好提示,便可继承UncaughtExceptionHandler类来处理.通过Th ...

  2. android仿美团客户端购买框悬浮特效

        实现步骤如下: 1,新建一个项目,新建一个MyScrollView继承自ScrollView   public class MyScrollView extends ScrollView { ...

  3. lintcode-156-合并区间

    156-合并区间 给出若干闭合区间,合并所有重叠的部分. 样例 给出的区间列表 => 合并后的区间列表: [ [ [1, 3], [1, 6], [2, 6], => [8, 10], [ ...

  4. JS中的数组转变成JSON格式字符串的方法

    有一个JS数组,如: var arr = [["projectname1","projectnumber1"],["projectname2" ...

  5. 【linux】- nohup 和 &

    &的意思是在后台运行, 什么意思呢? 意思是说,当你在执行 ./a.out & 的时候,即使你用ctrl C,那么a.out照样运行(因为对SIGINT信号免疫).但是要注意,如果你直 ...

  6. C# Designer.cs

    designer.cs 是窗体设计器生成的代码文件,作用是对窗体上的控件做初始化工作(在函数InitializeComponent()中) VS2003以前都把这部分代码放到窗体的cs文件中,由于这部 ...

  7. 简单名称值对节点类NameValuePair

    本类位于System.Data.dll中,名为:System.Data.Common.NameValuePair.主要用途是在DBConnectionString类中,解析ConnectionStri ...

  8. java数据结构-HashMap

    一直以来似乎都有一个错觉,认为map跟其他的集合类一样继承自Collection,其实不然,Map和Collection在结构层次上是没有任何关系的,通过查看源码可以发现map所有操作都是基于key- ...

  9. Django 2.0 学习(06)：Django 视图(进阶)

    概述 Django中的特方法,该方法代表了Django的Web页面,并且视图具有特定的模板.以博客应用为例进行说明,在博客应用中应该包含下面的视图: 博客主页:显示最近的一些记录: 详细页面:单个详细 ...

  10. JS内存空间详细图解

    JS内存空间详细图解 变量对象与堆内存 var a = 20; var b = 'abc'; var c = true; var d = { m: 20 } 因为JavaScript具有自动垃圾回收机 ...