题一、左侧菜单下拉

做题思路：先做菜单和子菜单，把子菜单默认隐藏。再用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>spinner/AutoCompleteTextView绑定适配器

    position = (Spinner)findViewById(R.id.position); String[] str = {"CEO","CFO",&qu ...

  2. c# 中base64字符串和图片的相互转换

    c#base64字符串转图片用到了bitmap类,封装 GDI+ 位图,此位图由图形图像及其特性的像素数据组成. Bitmap 是用于处理由像素数据定义的图像的对象. 具体bitmap类是什么可以自己 ...

  3. Gitkraken系列-Gitkraken使用操作

    一个优秀的团队合作离不开git,一个优秀的程序员也离不开git.gitkraken是我在进行软工实践这门课接触到的git的UI界面的工具,它给我留下的印象就是非常好用和方便 怎么个方便法呢? 方便的安 ...

  4. Python中编码问题：u'\xe6\x97\xa0\xe5\x90\x8d' 类型和 ‘\u559c\u6b22\u4e00\u4e2a\u4eba ’ 转为utf-8的解决办法

    相信小伙伴们遇到过类似这样的问题,python2中各种头疼的转码,类似u'\xe6\x97\xa0\xe5\x90\x8d' 的编码,直接s.decode()是无法解决编码问题.尝试了无数办法,都无法 ...

  5. 数据包从tcp->ip发出去

    ip_local_out->OUTPUT->dst_out->ip_output-> POSTROUTING -->ip_output_finish 上面的路径中啊,在O ...

  6. Keil MDK中Image~~RW_IRAM1~~ZI~~Limit（~表示$）

    ARM程序的组成 此处所说的“ARM程序”是指在ARM系统中正在执行的程序,而非保存在ROM中的bin映像(image)文件,这一点清注意区别.            一个ARM程序包含3部分:RO, ...

  7. 【bzoj4300】绝世好题 dp

    题目描述 给定一个长度为n的数列ai,求ai的子序列bi的最长长度,满足bi&bi-1!=0(2<=i<=len). 输入 输入文件共2行. 第一行包括一个整数n. 第二行包括n个 ...

  8. hadoop的第一个hello world程序（wordcount）

    在hadoop生态中,wordcount是hadoop世界的第一个hello world程序. wordcount程序是用于对文本中出现的词计数,从而得到词频,本例中的词以空格分隔. 关于mapper ...

  9. [洛谷P4168][Violet]蒲公英

    题目大意:有$n(n\leqslant4\times10^4)$个数,$m(m\leqslant5\times10^4)$个询问,每次问区间$[l,r]$内的众数,若相同输出最小的,强制在线. 题解: ...

  10. C++中swap函数

    本文是我用到swap函数时,对其产生好奇,所以结合网上有关博文写下的.个人水平有限,若有错误的地方,欢迎留言指出.谢谢! 一.通用的函数交换模板 template<class T> voi ...