<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,input,select,textarea,form{margin: 0; padding: 0;}
body{font:14px/1.5 "宋体";}
img{border:none;}
ul,ol{list-style:none;}
input,select,textarea{outline:none;border:none;background:none;}
textarea{resize:none;}
a{text-decoration:none;}
.Box{
width: 298px;
height: 98px;
margin: 100px;
border: 1px solid #eee;
overflow: hidden;
}
.con1{
height: 27px;
line-height: 27px;
position: relative;
background-color: #f7f7f7;
}
.uls{
width: 301px;
position: absolute;
left: -1px;
}
.uls li{
float: left;
width: 58px;
padding: 0 1px;
text-align: center;
border-bottom: 1px solid #eee;
}
/*.uls li:hover{
padding: 0;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
background-color: #fff;
border-bottom: 0;
}*/
.uls .on{
padding: 0;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
background-color: #fff;
border-bottom: 1px solid #fff;
}
.wen{
margin: 10px;
}
.tz{
overflow: hidden;
}
.tz ul li{
float: left;
width: 134px;
text-align: center;
}
.nos{
display: none;
}
</style>
<script type="text/javascript">
window.onload = function () {
var lis = document.getElementById('con1').getElementsByTagName('li');
var divs = document.getElementById('wen').getElementsByTagName('div');
for (var i = 0; i < lis.length; i++) {
lis[i].i = i;
lis[i].onmouseover = function () {
for (var j = 0; j < divs.length; j++) {
lis[j].className = "";
divs[j].style.display = "none";
}
this.className = "on";
divs[this.i].style.display = "block";
}
// lis[i].onmouseout = function () {
// this.className = "";
// }
}
}
</script>
</head>
<body>
<div class="Box">
<div id= "con1" class="con1">
<ul class="uls">
<li><a href="#">学习</a></li>
<li><a href="#">熟悉</a></li>
<li><a href="#">嘻嘻</a></li>
<li><a href="#">学习</a></li>
<li class="on"><a href="#">熟悉</a></li>
</ul>
</div>
<div id="wen" class="wen">
<div class="tz nos">
<ul>
<li>aaaaaaaaaaaa</li>
<li>bbbbbbbbbbbb</li>
<li>cccccccccccc</li>
<li>dddddddddddd</li>
</ul>
</div>
<div class="tz nos">
<ul>
<li>eeeeeeeeeeee</li>
<li>ffffffffffff</li>
<li>gggggggggggg</li>
<li>hhhhhhhhhhhh</li>
</ul>
</div>
<div class="tz nos">
<ul>
<li>iiiiiiiiiiii</li>
<li>jjjjjjjjjjjj</li>
<li>kkkkkkkkkkkk</li>
<li>llllllllllll</li>
</ul>
</div>
<div class="tz nos">
<ul>
<li>mmmmmmmmmmmm</li>
<li>nnnnnnnnnnnn</li>
<li>oooooooooooo</li>
<li>pppppppppppp</li>
</ul>
</div>
<div class="tz">
<ul>
<li>rrrrrrrrrrrr</li>
<li>ssssssssssss</li>
<li>tttttttttttt</li>
<li>uuuuuuuuuuuu</li>
</ul>
</div>
</div>
</div>
</body>
</html>为什么不能直接lis[i].className = "";，要再写一个for循环lis[j].className = "";才行？
lis[i].className = "" 是指清除当前的样式 但是你在给当前内容加样式的时候要先清除所有列表的样式 所以还要再遍历一遍所有列表清空所有列表的样式 再给当前列表添加className
for循环是为了遍历每一个，lis[i].className = "";是清空，只有这样， this.className = "on";划过的时候才只有一个，否则划过的都为this.className = "on";状态，没有清除