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

最新推荐文章于 2024-04-18 15:01:57 发布

我的程序员生涯

最新推荐文章于 2024-04-18 15:01:57 发布

阅读量2.3k

点赞数 1

分类专栏： jquery

本文链接：https://blog.csdn.net/wph001/article/details/50306109

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

<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
}

我的程序员生涯

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通过style样式实现动态显示与隐藏

今天学习了网页内容的布局与动态显示、隐藏，现把代码奉上： function change(val,obj){ obj.style.backgroundColor="red"; obj.style.cursor="pointer"; if(val=="rz"){ rz.style.display="block"; zs.style
复制链接

扫一扫