<!doctype html>
<html>
<head>
<style>
body{
margin:0px auto;
padding:0px;
300px;
}
*{
margin:0px auto;
padding: 0px;
}
.title{
302px;
height:40px;
}
li{
list-style-type:none;
float:left;
line-height:40px;
text-align:center;
font-size:15px;
font-family:"微软雅黑";
border: 1px solid black;
border-radius:10px 10px 0px 0px;
}
.content{
100%;
height:300px;
border:1px solid black;
float:left;
}
.content_1{
100%;
height:100%;
background:#6cc;
display:none;
}
.content_2{
100%;
height:100%;
background:red;
}
.selected{
background:#666;
}
.unselected{
background:#FFF;
}
</style>
<script>
window.onload=function(){
var objs=document.getElementsByClassName("title").item(0).getElementsByTagName("li");
for(var i=0;i<objs.length;i++){
objs.item(i).onmouseover=function(){
var divs=document.getElementsByClassName("content").item(0).getElementsByTagName("div");
for( var j=0;j<divs.length;j++){
divs[j].style.display="none";
}
divs[ parseInt(this.id.split("_")[1])-1].style.display="block";
var lis=document.getElementsByClassName("title").item(0).getElementsByTagName("li");
for(var k=0;k<lis.length;k++){
lis[k].className='unselected';
}
this.className="selected";
}
}
}
</script>
</head>
<body>
<div class="title">
<ul>
<li class="selected" id="li_1">教员信息</li>
<li id="li_2">学生信息</li>
</ul>
</div>
<div class="content">
<div class="content_1">
这是第一块
</div>
<div class="content_2">
这是第二块
</div>
</div>
</body>
</html>