javascript - 刚学JS，求问下大神下面代码有些什么问题

Question

下面是个简单的日历，为什么onmouseover一个li就会隐藏啊。。。实在不懂，TAT

<script>

window.onload=function(){
    var op=document.getElementById("tab");
    var aLi=document.getElementsByTagName("li");
    var oTxt=document.getElementsByTagName("p")[0];
    
    for (var i=0;i<aLi.length;i++)
    {
        aLi[i].index=i;
        aLi[i].onmouseover=function()
        {
            for(i=0;i<aLi.length;i++)
            {
                aLi[i].className="";
            }
            this.className="active";
            
            oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h><p>啦啦啦啦啦啦</p>';
        };
    }
    
     
};

</script>

Answer 1

window.onload=function(){
    var op = document.getElementById("tab");
    var aLi = document.getElementsByTagName("li");
    var oTxt = document.getElementsByTagName("p")[0];
    
    for (var i=0;i<aLi.length;i++){
        aLi[i].index=i;
        aLi[i].onmouseover=function(){
            this.className="active";
            oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h><p>啦啦啦啦啦啦</p>';
        };
    }
};

Answer 2

跟楼上答案一样.因为:`for(i=0;i<aLi.length;i++)

        {
            aLi[i].className="";
        }`把className都设置为空了

Answer 3

没有html和css不好看出问题所在

Answer 4

这样写的代码也是很不够优雅啊，在每一个li元素上都绑定一个事件处理得多耗内存，完全可以考虑使用事件代理