通过style样式实现动态显示与隐藏

80 阅读 0 评论 53 点赞

我是靠谱客的博主老迟到乐曲，最近开发中收集的这篇文章主要介绍通过style样式实现动态显示与隐藏，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今天学习了网页内容的布局与动态显示、隐藏，现把代码奉上：

<html>
<head>
<link href="./shohu.css" rel="stylesheet" type="text/css"/>
<script language="javascript">
  function change(val,obj){
   obj.style.backgroundColor="red";
   obj.style.cursor="pointer";
   if(val=="rz"){
    rz.style.display="block";
    zs.style.display="none";
    cg.style.display="none";
   }else if(val=="zs"){
    rz.style.display="none";
    zs.style.display="block";
    cg.style.display="none";
   }else if(val=="cg"){
    rz.style.display="none";
    zs.style.display="none";
    cg.style.display="block";
   }

  }
  function chang2(obj)
  {
    obj.style.backgroundColor="silver";
    obj.style.cursor="auto";
   }
  </script>
</head>
<body>
<div class="div1">
<div class="nav1">
  <ul>
   <li οnmοuseοver="change('zs',this)" οnmοuseοut="chang2(this)">招生</li>
   <li οnmοuseοver="change('rz',this)" οnmοuseοut="chang2(this)">热招</li>
   <li οnmοuseοver="change('cg',this)" οnmοuseοut="chang2(this)">出国</li>
  </ul>
</div>
<div id="zs" class="zs" >
  <ul>
   <li><a href="#">招生招生招生招生</a></li>
   <li><a href="#">招生招生招生招生</a></li>
   <li><a href="#">招生招生招生招生</a></li>
   <li><a href="#">招生招生招生招生</a></li>
   <li><a href="#">招生招生招生招生</a></li>
   <li><a href="#">招生招生招生招生</a></li>
   <li><a href="#">招生招生招生招生</a></li>
   <li><a href="#">招生招生招生招生</a></li>
  </ul>
</div>
<div id="rz" class="rz" οnmοuseοver="change('rz')">
  <ul>
   <li><a href="#">热招热招热招热招</a></li>
   <li><a href="#">热招热招热招热招</a></li>
   <li><a href="#">热招热招热招热招</a></li>
   <li><a href="#">热招热招热招热招</a></li>
   <li><a href="#">热招热招热招热招</a></li>
   <li><a href="#">热招热招热招热招</a></li>
   <li><a href="#">热招热招热招热招</a></li>
   <li><a href="#">热招热招热招热招</a></li>
  </ul>
</div>
<div id="cg" class="cg" οnmοuseοver="change('cg')">
  <ul>
   <li><a href="#">出国出国出国出国</a></li>
   <li><a href="#">出国出国出国出国</a></li>
   <li><a href="#">出国出国出国出国</a></li>
   <li><a href="#">出国出国出国出国</a></li>
   <li><a href="#">出国出国出国出国</a></li>
   <li><a href="#">出国出国出国出国</a></li>
   <li><a href="#">出国出国出国出国</a></li>
   <li><a href="#">出国出国出国出国</a></li>
  </ul>
</div>
</div>
</body>
</html>

2.css文件

body{
font-size:12px;
}

.div1{
width:126px;
height:156px;
background-color:pink;
}
.nav1{
width:20px;
height:156px;
float:left;
/*background-color:red;*/
padding:0px;
margin:0px;
}
.nav1 ul{
padding:0px;
margin-top:8px;
margin-left:0px;
width:20px;
height:156px;
float:left;
}
.nav1 ul li{
list-style-type:none;
width:20px;
height:40px;
float:left;
background-color:silver;
text-align:center;
padding-top:2px;
margin-top:3px;

}
.zs,.rz,.cg{
width:106px;
height:156px;
/*background-color:silver;*/
margin-left 2px;
float:left;
}
.zs ul,.rz ul,.cg ul{
padding:0px;
margin-top:6px;
margin-left:4px;
height:156px;
width:106px;
float:left;
}
.zs ul li,.rz ul li,.cg ul li{
list-style-type:none;
margin-top:0px;
width:106px;
line-height:18px;
float:left;
}
.rz{
display: none
}
.cg{
display: none
}