您的位置：首页 > Web前端 > CSS

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

2015-12-15 00:34 656 查看
今天学习了网页内容的布局与动态显示、隐藏，现把代码奉上：

<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 onmouseover="change('zs',this)" onmouseout="chang2(this)">招生</li>

<li onmouseover="change('rz',this)" onmouseout="chang2(this)">热招</li>

<li onmouseover="change('cg',this)" onmouseout="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" onmouseover="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" onmouseover="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

}


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航