<!doctype html>
<html><head><style> body{ margin:0px auto; padding:0px; width:300px; } *{ margin:0px auto; padding: 0px; } .title{ width: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{ width:100%; height:300px; border:1px solid black; float:left; } .content_1{ width:100%; height:100%; background:#6cc; display:none; } .content_2{ width:100%; height:100%; background:red;}
.selected{
background:#666; } .unselected{ background:#FFF; }</style><script> window.οnlοad=function(){ var objs=document.getElementsByClassName("title").item(0).getElementsByTagName("li"); for(var i=0;i<objs.length;i++){ objs.item(i).οnmοuseοver=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>