代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="隔行换色" /> <meta name="description" content="隔行换色的例子" /> <title>隔行换色 - www.jb200.com-脚本学堂</title> <script type="text/javascript"> // 返回Id、Tag function Pid(id,tag){ if(!tag){return document.getElementById(id);} else{return document.getElementById(id).getElementsByTagName(tag);} } // 隔行换色 function ghhs(id,tag,s) { var line=Pid(id,tag); for (var i=1;i<line.length+1;i++) { line[i-1].className=(i%2>0)?"t1":"t2"; } if(s=="no"){ return; } else if(!s){ for(var i=0;i<line.length;i++) { line[i].onmouseover=function(){ this.tmpClass=this.className; this.className+=" up"; } line[i].onmouseout=function(){ this.className=this.tmpClass; } } } else{ for(var i=0;i<line.length;i++) { line[i].tmep=i; line[i][s]=function(){ ghhs_tab(this.tmep); } } } function ghhs_tab(s){ for(var i=0;i<line.length;i++){ if(!line[i].tmpClass){ line[i].tmpClass=line[i].className+=" pr1984_com"; } if(s==i){ line[i].className+=" up"; } else { line[i].className=line[i].tmpClass; } } } } </script> <style type="text/css"> .t1 {background:#eee;} .t2 {background:#fff;} .up {background:#ddd;} </style> </head> <body> <div id="nav01"> <ul> <li>路过</li><li>脚本学堂</li><li>脚本学堂</li><li>脚本学堂</li> </ul> </div> <div id="nav02"> <ul> <li>无视路过</li><li>脚本学堂</li><li>脚本学堂</li><li>脚本学堂</li> </ul> </div> <div id="nav03"> <ul> <li>踩我</li><li>脚本学堂</li><li>脚本学堂</li><li>脚本学堂</li> </ul> </div> <script type="text/javascript"> ghhs("nav01","li"); // 鼠标经过时变色 ghhs("nav02","li","no"); // 只隔行换色 ghhs("nav03","li","onclick"); // 鼠标点击当前标记变色 </script> </body> </html>