<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table切换</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
text-decoration: none;
}
a{color: #000}
#box{
width: 500px;
border: 1px solid #666;
margin: 20px auto;
height: 500px;
}
.title{
height: 30px;
background: #7e7e7e;
position: relative;
}
.title ul{
overflow: hidden;
position: absolute;
width: 500px;
background: #fff
}
.title ul li{
float: left;
background: #eee;
width: 122px;
padding: 0 2px;
}
.title ul li a{
display: block;
line-height: 30px;
text-align: center;
padding: 0 2px;
border-left-color:#666;
border-right-color: #666;
border-bottom-color: #fff
}
.title ul li a:hover{
color: #999
}
.title ul .active{
background: #fff;
padding: 0;
}
</style>
</head>
<body>
<div id="box">
<div id="top">
<ul>
<li><a href="javascript:">切换一</a></li>
<li><a href="javascript:">切换二</a></li>
<li><a href="javascript:">切换三</a></li>
<li><a href="javascript:">切换四</a></li>
</ul>
</div>
<div id="box2">
<div>
<ul>
<li>
<a href="#">测试文章测试文章</a>
</li>
<li>
<a href="#">测试文章测试文章</a>
</li>
<li>
<a href="#">测试文章测试文章</a>
</li>
<li>
<a href="#">测试文章测试文章</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#">测试文章测试文章</a>
</li>
<li>
<a href="#">测试文章测试文章</a>
</li>
<li>
<a href="#">测试文章测试文章</a>
</li>
<li>
<a href="#">测试文章测试文章</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#">测试文章测试文章</a>
</li>
<li>
<a href="#">测试文章测试文章</a>
</li>
<li>
<a href="#">测试文章测试文章</a>
</li>
<li>
<a href="#">测试文章测试文章</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#">测试文章测试文章</a>
</li>
<li>
<a href="#">测试文章测试文章</a>
</li>
<li>
<a href="#">测试文章测试文章</a>
</li>
<li>
<a href="#">测试文章测试文章</a>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
function Id(id){
return typeof id === 'string'?document.getElementById(id):id;
}
window.onload =function(){
var titles = Id("top").getElementsByTagName("li"),
divs = Id("box2").getElementsByTagName("div");
if(titles.length!=divs.length){
return;
}
for(var i=0;i<titles.length;i++){
titles[i].id =i;
titles[i].onmouseover=function(){
for(var j =0;j<titles.length;i++){
titles[j].className=""
}
this.className="active";
}
}
}
</script>
</body>
</html>
加上这一句之后就蹦了。跟老师写的一样啊
for(var j =0;j<titles.length;i++){
titles[j].className=""
}
