做成选项卡可是遇到困难，求帮助~
<!DOCTYPE>
<html>
<head>
<title>一个简单地tab选项卡</title>
<meta charset="utf-8">
<style type="text/css">
*{padding: 0;margin: 0;font-size:12px; color: #fff;}
ul,li{list-style: none;}
#content{
width: 350px;
height: 250px;
margin: 0 auto;
}
#content ul{
display: block;
width: 350px;
height: 30px;
line-height: 30px;
background: #a25204;
}
#content ul li{
float: left;
width: 50px;
height: 28px;
line-height: 28px;
margin: 3px 10px;
text-align: center;
border-bottom: none;
display: inline-block;
}
p{border-bottom: 1px solid #673401;}
#content ul li.num{
/*border-top: 2px solid #673401;
border-bottom: 2px solid #673401;*/
background-color: #ac5a09;
}
#content ul li:hover{
background-color: #ed851f;
text-decoration: none;
}
#content div{
height: 200px;
line-height: 25px;
padding: 20px;
background-color: #a25204;
}
.hide{display: none;}
</style>
<script type="text/javascript">
window.onload=function(){
var oTab=document.getElementById("content");
var li=document.getElementsByTagName("li");
var div=oTab.getElementsByTagName("div");
for(var i=0;i<li.length;i++){
li[i].index=i;
li[i].onclick=function(){
for(var j=0;j<li.length;j++){
li[j].className="";
li[j].className="hide";
}
this.className="num";
div[this.index].className="";
}
}
}
</script>
</head>
<body>
<div id="content">
<ul>
<li class="num">新闻</li>
<li >公告</li>
<li >学术</li>
<li >文体</li>
<li >交流</li>
</ul>
<div>
<p>共推海外引智引才，国际交流与合作--外事处招</p>
<p>英国谢菲尔大学副校长一行来我校参观</p>
<p>美国驻华大使领事墨客访问我校并作演讲</p>
</div>
<div class="hide">
<p>宋应华常务副校长回见拉周登大学代表</p>
<P>医学院代表团访问澳洲高校</p>
<p>第四十届太平洋联盟博士论坛顺利结束</p>
</div>
<div class="hide">
<p>比利时布鲁塞尔自由大学代表团访问我校</p>
<p>生命科学研究院杰出学者系列讲座</p>
<p>东南大学教授学术报告</p>
</div>
<div class="hide">
<p>西班牙格拉纳达大学代表团访问我校</p>
<p>浙江大学公开招聘建筑工程师公示</p>
<p>浙江传媒大学与国际文化学院联合表演</p>
</div>
<div class="hide">
<p>医学院举行2015年度优秀留学生颁奖</p>
<p>比利时布鲁塞尔自由大学代表团访问我校</p>
<p>第四十届太平洋联盟博士论坛顺利结束</p>
</div>
</div>
</body>
</html>
