js实现鼠标移到导航改变li标签的CSS样式解决方法-JavaSript-爱易网页

js实现鼠标移到导航改变li标签的CSS样式解决方法

日期：2014-05-16　浏览次数：20318 次

js实现鼠标移到导航改变li标签的CSS样式
js：

JScript code

 <script language="javascript">  
      var ul = document.getElementById("ul");  
var lis = ul.getElementsByTagName("li");
for ( var i=0,len=lis.length; i <len; i++) {
 (function(){
     lis[i].onmouseover = function(){this.className ="on";};   
     lis[i].onmouseout = function(){this.className="";};
  })(i);
}
</script>

html：

HTML code

<div id="main-menu">
                    <ul class="nav">
                        <li id="li-index" ><a href="index.html">首页</a></li>
                        <li id="li-info"><a href="#">城市情报</a></li>
                        <li id="li-map" ><a href="#">情绪地图</a></li>
                        <li id="li-shortcut" ><a href="#">休闲快捷</a></li>
                        <li id="li-vogue" ><a href="#">时尚中人</a></li>
                        <li id="li-other" ><a href="#">其他栏目</a></li>
                    </ul>
                    <!-- End subnav -->
                </div>

实现将鼠标移动到导航上改变所处标签的CSS样式。写了上面的js代码就是实现不了。求解决

------解决方案--------------------
var lis = ul.getElementsByTagName("li");
改成 var lis = document.getElementsByTagName("li");
------解决方案--------------------

探讨

var ul = document.getElementById("ul");这个写错了。。这个是找Id 为ul的ul。。

------解决方案--------------------
var ul = document.getElementById("ul");

其中id "ul" 未定义