码迷,mamicode.com
首页 > Web开发 > 详细

9.25 JS\练习题

时间:2016-09-25 11:52:51      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:

题一、左侧菜单下拉

做题思路:先做菜单和子菜单,把子菜单默认隐藏。再用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>

9.25 JS\练习题

标签:

原文地址:http://www.cnblogs.com/Strive-count/p/5905545.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!