js没有效果，哪里错了？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>hover()方法切换事件</title>
<style>
*{padding:0px;margin:0px;
list-style:none;font-size:17px;}
#wrap{width:300px;border:1px solid #eee;margin:0 auto;overflow:hidden}
#header{height:35px;background:#eee}
#wrap #header ul li{float:left;line-height:35px;height:35px;width:58px;text-align:center;list-style:none;border-left:1px solid #fff;
border-right:1px solid #fff;}
.aa{background:white;font-weight:bold;}
#content p{line-height:40px;text-align:center;}
.one{display:block;}
.two{display:none;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<ul>
<li class="aa">公告</li>
<li class="">公告</li>
<li class="">公告</li>
<li class="">公告</li>
<li class="">公告</li>
</ul>
</div>
<div id="content">
<p class="one">
1法的功能是当鼠,
方法的功能是当鼠,
方法的功能是当鼠,
方法的功能是当鼠.
</p>
<p class="two">
2法的功能是当鼠,
方法的功能是当鼠,
方法的功能是当鼠,
方法的功能是当鼠.
</p>
<p class="two">
3法的功能是当鼠
方法的功能是当鼠
方法的功能是当鼠
方法的功能是当鼠
</p>
<p class="two" >
4法的功能是当鼠
方法的功能是当鼠
方法的功能是当鼠
方法的功能是当鼠
</p>
<p class="two">
方法的功能是当鼠
方法的功能是当鼠
方法的功能是当鼠
方法的功能是当鼠
</p>
</div>
</div>
<script>
window.onload=function(){
var l=document.getElementsByTagName("li")
var u=document.getElementsByTagName("p")
for(i=0;i<l.length;i++){
l[i].index=i;
l[i].onclick=function(){
for(j=0;j<l.length;j++){
l[j].className="";
u[j].className="two";
}
this.className="aa";
u[this.index].className="one"
}
}
}
</script>
</body>
</html>点击后内容没有变化，不知道哪里错了
