仿sohu頻道切換效果
分析：
代碼：
css文件：
body{
font-size:12px;
}
.div1{
width:126px;
height:156px;
/* background-color:pink; */
}
.navi{
width:21px;
height:156px;
/* background-color:yellow; */
float:left;
}
.navi ul{
padding:0px;
margin-left:0px;
margin-top:0px;
float:left;
}
.navi li{
list-style-type:none;
width:19px;
height:42px;
margin-top:2px;
text-align:center;
background-color:silver;
padding-top:8px;
/* padding-bottom:8px; */
/* position:absolute; */
}
.zs,.rz,.cg{
width:101px;
height:154px;
/* background-color:silver; */
margin-left:3px;
margin-top:2px;
float:left;
}
.zs ul,.rz ul,.cg ul{
padding:0px;
margin-top:0px;
float:left;
}
.zs ul li,.rz ul li,.cg ul li{
list-style-type:none;
line-height:19px;
/* width:20px;
height:50px;
margin-top:2px;
text-align:center;
background-color:silver; */
}
.rz{
display:none;
}
.cg{
/* visibility:hidden; */
display:none;
/* 這裏注意：必須使用display，
display就是不顯示，visibility是隱藏，但是還佔着位置，只是隱藏不顯示 */
}
html代碼：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mycss.css" type="text/css">
<script language="javascript">
function change(val,obj){
obj.style.backgroundColor="#ffc12d";
//這裏注意：必須使用display，
//display就是不顯示，visibility是隱藏，但是還佔着位置，只是隱藏不顯示
if(val=='zs'){
//zs.style.visibility='visible';
//rz.style.visibility="hidden";
//cg.style.visibility="hidden";
zs.style.display='block';
rz.style.display="none";
cg.style.display="none";
}else if(val=='rz'){
zs.style.display='none';
rz.style.display="block";
cg.style.display="none";
}else if(val=='cg'){
zs.style.display='none';
rz.style.display="none";
cg.style.display="block";
}
}
function change2(obj){
obj.style.backgroundColor="silver";
}
</script>
</head>
<body>
<div class="div1">
<div class="navi">
<ul>
<li onmouseover="change('zs',this)" onmouseout="change2(this)">招生</li>
<li onmouseover="change('rz',this)" onmouseout="change2(this)">熱招</li>
<li onmouseover="change('cg',this)" onmouseout="change2(this)">出國</li>
</ul>
</div>
<!-- 超鏈接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">
<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">
<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>
效果圖：
