下面代码鼠标不能行动到其他月份上，及月活动那块没有反应？

问题描述：

代码如下：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16-JS简易日历</title>
    <style>
        div#tab{
            width: 400px;
            height: 550px;
            margin: 0 auto;
            background-color: #cccccc;
        }
        .text{
            width: 400px;
            height: 150px;
            border: 1px solid #9a9a9a;
            box-sizing: border-box;
            background-color: #ffce1d;
            margin: 0 auto;
            text-align: center;
            float: left;
        }
        ul li{
            font-family:"楷体";
            font-size: 15px;
            list-style: none;
            width: 100px;
            height: 100px;
            border: 1px solid #f76222;
            box-sizing: border-box;
            background-color: rgba(28, 28, 28, 0.78);
            text-align: center;
            float: left;;
        }
    </style>
    <script>
       window.onload=function ()
       {
           var arr=['快过年了，还有什么要准备的呢？', '二月春风似捡到，出去春游吧！', '三月桃花开得正艳，来赏赏花吧'];

           var oDiv=document.getElementById('tab');
           var aLi=oDiv.getElementsByTagName('li');
           var oTxt=oDiv.getElementsByTagName('div')[0];

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

               aLi[i].onmouseover=function()
               {
                   for(var f=0;f<aLi.length;f++)
                   {
                       aLi[i].className='';//清空所有的class
                   }
                   this.className='active';
                   oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
               };

           }

       }
    </script>
</head>
<body>
<div id="tab" class="calendar">
    <ul>
    <li class="active"><h2>一月</h2><p>January</p></li>
    <li><h2>二月</h2><p>February</p></li>
    <li><h2>三月</h2><p>March</p></li>
    <li><h2>四月</h2><p>April</p></li>
    <li><h2>五月</h2><p>May</p></li>
    <li><h2>六月</h2><p>June</p></li>
    <li><h2>七月</h2><p>July</p></li>
    <li><h2>八月</h2><p>August</p></li>
    <li><h2>九月</h2><p>September</p></li>
    <li><h2>十月</h2><p>October</p></li>
    <li><h2>十一月</h2><p>November</p></li>
    <li><h2>十二月</h2><p>December</p></li>
    </ul>
<div class="text">
    <h2>一月活动</h2>
    <p>快过年了，还月什么要准备的呢？</p>
</div>
</div>
</body>
</html>

答

变量是f你调用i的越界了

                aLi[i].onmouseover=function()
               {
                   for(var f=0;f<aLi.length;f++)
                   {
                       aLi[f].className = '';
                       //aLi[i].className='';//清空所有的class
                   }
                   this.className='active';
                   oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
               };

下面代码鼠标不能行动到其他月份上，及月活动那块没有反应？

相关推荐