<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,ul{
margin:0;padding:0;
}
ul li{
list-style:none;
}
#list1{
width: 800px;
height: 300px;
border: 1px solid #CCCCCC;
margin: 15px auto;
border-radius:5px 5px 5px 5px;
}
#add1{
width: 800px;
height: 50px;
}
#listul1{
width:100%;
height:100%;
}
#listul1 li{
width: 100px;
height: 50px;
padding: 0px;
float: left;
text-align: center;
line-height: 50px;
font-size: 12pt;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color: #F54343;
display: block;
}
#add2{
width:800px;
height:248px;
border-top:1px solid red;
}
#listul2{
width:100%;
height:100%;
}
#listul2 li{
width:100%;
height:100%;
display:none;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var listul1=document.getElementById('listul1');
var ul1li=listul1.getElementsByTagName('li');
var listul2=document.getElementById('listul2');
var ul2li=listul2.getElementsByTagName('li');
for(var i=0;i<ul1li.length;i++)
{
ul1li[i].index=i;
ul1li[0].style.background='#DA3C3C';
ul1li[0].style.color='#fff';
ul2li[0].style.display='block';
ul1li[i].onmouseover=function()
{
for(var i=0;i<ul1li.length;i++)
{
ul1li[i].style.background='';
ul1li[i].style.color='';
ul2li[i].style.display='none';
}
this.style.cursor='pointer';
this.style.background='#DA3C3C';
this.style.color='#fff';
ul2li[this.index].style.display='block';
}
}
}
</script>
</head>
<body>
<div id="list1">
<div id="add1">
<ul id="listul1">
<li>教育新闻</li>
<li>学校新闻</li>
<li>教师新闻</li>
<li>学生新闻</li>
</ul>
</div>
<div id="add2">
<ul id="listul2">
<li>教育新闻内容1</li>
<li>
学校新闻内容2
</li>
<li>教师新闻内容3</li>
<li>学生新闻内容4</li>
</ul>
</div>
</div>
</body>
</html>
