一个很常见的效果，也算是老生常谈了，实现的方法也很多 比如用jQuery我们就可以简单的如此写道：
$("tr:even").addClass("even");
$("tr").hover(
function(){$(this).addClass("over")},
function(){$(this).removeClass("over")}
)
但是为了这么简单的效果引进jQuery库的话有点大炮打蚊子。用JS 实现一下就如下：
Code
var tst=function(id,tag){
return new tst.prototype.init(id,tag);
}
tst.prototype={
itms:[],
init:function(id,tag){
this.ctnr=document.getElementById(id);
this.itms=this.ctnr.getElementsByTagName(tag);
this.len=this.itms.length;
tst.prototype.hdlr.call(this);
},
hdlr:function(){
for(i=0; i<this.len; i++){
if(i%2){
this.itms[i].className+=" even";
}
this.itms[i].onclick=function(){
if(!this.className.match("sel")){
this.className=this.className.replace("over","");
this.className+=" sel";
}else{
this.className=this.className.replace("sel","");
}
}
this.itms[i].onmouseover=function(){
if(!this.className.match("sel")) this.className+=" over";
}
this.itms[i].onmouseout=function(){
if(this.className.match("over")){
this.className=this.className.replace("over","");
}
}
}
}
}
//使用范例：tst(id,tag);
tst("test","li");
tst("tabcon","tr"
当然也可以把类名写进参数里，只需自己动手稍加改装便可。
当然直接用 元素的 :hover 伪类更方便，大多数的浏览器都支持，只是万恶的IE6 不行。所以只能写这么一堆无聊的代码了。