首页 > 代码库 > JS练习题 （ 下拉菜单；好友选中输入）
JS练习题 （ 下拉菜单；好友选中输入）
题一、左侧菜单下拉
做题思路：先做菜单和子菜单，把子菜单默认隐藏。再用JS调样式。
<style type="text/css">
*{ margin:0px auto; padding:0px}
.text1{ width:180px; height:39px; 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; 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)" onm ouseover="Bian(this)" onm ouseout="Hui(this)" xz="0">叫一声</div>
<div class="text" onclick="Show(this)" onm ouseover="Bian(this)" onm ouseout="Hui(this)" xz="0">佛祖</div>
<div class="text" onclick="Show(this)" onm ouseover="Bian(this)" onm ouseout="Hui(this)" xz="0">回头</div>
<div class="text" onclick="Show(this)" onm ouseover="Bian(this)" onm ouseout="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练习题 （ 下拉菜单；好友选中输入）