想通过for循环给li标签添加onmouseover事件 但是不知道哪里写错了
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>日历</title>
<style type="text/css">
*{
margin: 0px auto;
padding: 0px;
}
#div1{
width: 500px;
height: 650px;
background: #E0E0E0;
}
ul{
list-style-type: none;
padding: 10px;
}
ul li{
height: 100px;
width: 100px;
float: left;
background: black;
text-align: center;
color: white;
margin: 10px;
line-height: 50px;
}
#div2{
border: 1px solid black;
height: 200px;
width: 459px;
float: left;
margin: 20px;
}
.active{
background: white;
color: red;
}
</style>
<!--本想通过for循环给所有的li标签添加onmouseover事件 但是不知道是哪里写错了 onmouseover事件一直没有用-->
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var aLi=oDiv.getElementsByTagName('li');
var oTxt=document.getElementById('div2');
for (var i = 0; i < aLi.length; i++) {
aLi[i].onmouseover=function(){
for (var i = 0; i < aLi.length; i++) {
aLi[i].ClassName='';
}
this.ClassName='active';
};
}
};
</script>
</head>
<body>
<div id="div1">
<ul>
<li class="active"><h2>1</h2><p>JAN</p></li>
<li><h2>2</h2><p>FER</p></li>
<li><h2>3</h2><p>MAP</p></li>
<li><h2>4</h2><p>APR</p></li>
<li><h2>5</h2><p>MAY</p></li>
<li><h2>6</h2><p>JUN</p></li>
<li><h2>7</h2><p>JUL</p></li>
<li><h2>8</h2><p>AUG</p></li>
<li><h2>9</h2><p>SEP</p></li>
<li><h2>10</h2><p>OCT</p></li>
<li><h2>11</h2><p>NOV</p></li>
<li><h2>12</h2><p>OEC</p></li>
</ul>
<div id="div2"></div>
</div>
</body>
</html>
