本实例主要用js的方法对li进行绑定事件，从而实现隔行换色，鼠标变色也好做，但是你如果是移出你就会发现问题了，因为是遍历的，所以还需要判断奇偶行，所以必须使用闭包的方法进行传值。
本人觉得JQ再强一段小代码没必要加载那么大个 js文件。如果大家觉得还有什么更好的方法可以给我留言探讨
效果图下图所示
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隔行指向变色</title>
<script type="text/javascript">
//chagec("表格名称","奇数行背景","偶数行背景",”经过时的颜色“);
function chagec(o,a,b,c){
var t=document.getElementById(o).getElementsByTagName("li");
for(var i=0;i<t.length;i++){
if(i%2==0)
{
t[i].style.background=b;
}
else
{
t[i].style.background=a;
}
t[i].onmouseover=function adds(){
this.style.background=c;
}
//闭调用包
t[i].onmouseout=(function adds(i){
return function(){
this.style.background=(i%2==0)?b:a;
}
})(i);
}
}
</script>
<style>ul{width:500px;margin:0 auto;padding:0;}li{list-style:none;height:30px;line-height:30px;padding-left:15px;border-bottom:1px dotted #ccc;font-size:12px;}a{color:#000;}</style>
</head>
<body>
<ul id="listd">
<li><a title="C#.net文件批量上传解决方案附下载(swfupload)" href="http://www.ok22.org/art_detail.aspx?id=232">C#.net文件批量上传解决方案附下载(sw...</a></li>
<li><a title="kindeditor/ckeditor编辑器加+图片自动上传成功" href="http://www.ok22.org/art_detail.aspx?id=113">kindeditor/ckeditor编辑器加+图片自动...</a></li>
<li><a title="前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态" href="http://www.ok22.org/art_detail.aspx?id=118">前端设计js+Tab切换可关闭+添加并自动...</a></li>
<li><a title="js文字上下滚动+左右滚动兼容FF/IE" href="http://www.ok22.org/art_detail.aspx?id=114">js文字上下滚动+左右滚动兼容FF/IE</a></li>
<li><a title="js给C#控件赋值" href="http://www.ok22.org/art_detail.aspx?id=75">js给C#控件赋值</a></li>
<li><a title="ckeditor编辑器+finder配置上传功能" href="http://www.ok22.org/art_detail.aspx?id=134">ckeditor编辑器+finder配置上传功能</a></li>
<li><a title="JS读取XML并显示各节点[兼容IE/FF/Chrome,Safari]" href="http://www.ok22.org/art_detail.aspx?id=137">JS读取XML并显示各节点[兼容IE/FF/Chr...</a></li>
<li><a title="iframe里面的页面调用父窗口,左右窗口js函数的方法" href="http://www.ok22.org/art_detail.aspx?id=87">iframe里面的页面调用父窗口,左右窗口...</a></li>
<li><a title="如何引导用户评论(用户检验)" href="http://www.ok22.org/art_detail.aspx?id=17">如何引导用户评论(用户检验)</a></li>
<li><a title="我收藏的教程及工具 " href="http://www.ok22.org/art_detail.aspx?id=109">我收藏的教程及工具</a></li>
</ul>
<script>
//chagec("表格名称","奇数行背景","偶数行背景"，"经过时的颜色");
chagec("listd","#eee","#fff","#fffaaa");
</script>
</body>
</html>
搞定!
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)