为什么设置日历innerHTML失效，新手求解? 万分感谢！代码如下

tjz1129 2017-08-21 05:51:07

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>01</title>
<style>
ul{
list-style:none;
}
#div1{
width:300px;
height:540px;
background:#E9E9E6;
}
#div1 ul li{
width:60px;
height:60px;
display:block;
float:left;
background:#41403F;
text-align:center;

margin:20px 10px 10px 10px;
}
#div1 ul li h2{
color:white
}
#div1 .active{
background:orange;
}
#div2{
margin:30px 20px 20px 50px;
float:left;
width:220px;
height:120px;
background:#EEF0ED;
}
</style>

<script>

window.onload=function()
{
var odiv=document.getElementById('div1');
var oli=odiv.getElementsByTagName('li');
var adiv=odiv.getElementsByTagName('div2')[0];

for(var i=0;i<oli.length;i++)
{
oli[i].index=i;

oli[i].onmouseover=function()
{
for(var i=0;i<oli.length;i++)
{
oli[i].className='';
}
this.className='active';

adiv.innerHTML='<h2>'+this.index+'月活动</h2> <p>元旦~~~</p>';

}
}
}
</script>

</head>

<body>
<div id="div1">
<ul>
<li class="active"><h2>1</h2><p>一月</p></li>
<li><h2>2</h2><p>二月</p></li>
<li><h2>3</h2><p>三月</p></li>
<li><h2>4</h2><p>四月</p></li>
<li><h2>5</h2><p>五月</p></li>
<li><h2>6</h2><p>六月</p></li>
<li><h2>7</h2><p>七月</p></li>
<li><h2>8</h2><p>八月</p></li>
<li><h2>9</h2><p>九月</p></li>
<li><h2>10</h2><p>十月</p></li>
<li><h2>11</h2><p>十一月</p></li>
<li><h2>12</h2><p>十二月</p></li>
</ul>
<div id="div2">
<h2>1月活动</h2>
<p>元旦~~~</p>
</div>
</div>
</body>
</html>

...全文