1，主要是方法是div+css规划好布局之后，根据鼠标的事件onmouseove、onmouseout来相应，当然也可以改成onclick时间等，然后通过传id值到函数，判断是否被选中，根据选中与否同时关联display属性，设置block/none来显示布局
在css中关于显示或者隐藏布局的属性主要是有2个比较容易混淆的：visibility和display两个属性
因为它们看起来是做同样的事情，但实际上，这两个属性是完全不同的。 visibility属性用来设置一个给定的元素是否显示（visibility="visible|hidden"），但是，虽然一个元素的visibility被设置为hidden，但是该元素仍然会占据设计的位置，而在一般的网页布局中，肯定是希望隐藏后不占用位置的，因此用的是display属性，关于这两个易混淆的属性的区分，在这篇博客里面有介绍http://blog.csdn.net/sunshinestation/article/details/1836366
下面是主要的一些代码
likesouhu.html
<html>
<head>
<link rel="stylesheet" href="likesouhu.css" type="text/css" />
<title>仿搜狐网站的js的div切换 </title>
<script language="javascript" type="text/javascript">
function change(val,obj){
obj.style.backgroundColor="yellow";
/*alert("ok");*/
if(val=="zs"){
zs.style.display="block";
rz.style.display="none";
}else if(val=="rz"){
rz.style.display="block";
zs.style.display="none";
}
}
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>出国</li>
</ul>
</div>
<!--超链接的div-->
<div class="zs" id="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>
<li><a href='#'>招生招生招生招生</a></li>
</ul>
</div>
<div class="rz" id="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>
<li><a href='#'>热招热招热招热招</a></li>
</ul>
</div>
<div>
</body>
</html>
下面是其css文件likesouhu.css
body{
font-size:12px;
}
.div1{
width:126px;
height:156px;
/*background-color:pink;*/
}
.navi{
width:21px;
height:156px;
/*background-color:silver;*/
float:left;
}
.navi ul{
padding:0px;
margin-left:0px;
float:left;
}
.navi ul li{
list-style-type:none;
width:21px;
height:50px;
margin-top:2px;
background-color:silver;
float:left;
text-align:center;
padding-top:10px;
}
.zs,.rz{
width:98px;
height:156px;
/*background-color:silver;*/
margin-left:4px;
margin-top:4px;
float:left;
}
.zs ul,.rz ul{
padding:0px;
margin-left:0px;
float:left;
}
.zs ul li,.rz ul li{
list-style-type:none;
margin-top:0px;
margin-left:2px;
line-height:17px;
float:left;
}
.rz{
display:none;
}
/*
body{
font-size:12px;
}
.div1{
width:126px;
height:156px;
background-color:pink;
}
.navi{
width:21px;
height:156px;
float:left;
}
.navi ul{
padding:0px;
margin-left:0px;
margin-top:0px;
float:left;
}
.navi ul li{
list-style-type:none;
width:21px;
height:38px;
margin-top:3px;
text-align:center;
padding-top:10px;
background-color:silver;
float:left;
}
.zs,.rz{
width:100px;
height:156px;
margin-left:4px;
float:left;
}
.zs ul,.rz ul{
padding:0px;
margin-top:2px;
margin-left:0px;
float:left;
}
.zs ul li,.rz ul li{
list-style-type:none;
margin-top:0px;
margin-left:2px;
line-height:19px;
float:left;
}
.rz{
/*visibility:hidden;*/
/* display:none;
}
*/
得到的效果如下：
左边的div关于招生、热招、出国的栏目部分以及右边的分层部分，在现在的网站引擎中都是用列表形式即：<ul><li></li></ul>来实现的