隔行换色 划过变色 点击选中

一个很常见的效果，也算是老生常谈了，实现的方法也很多 比如用jQuery我们就可以简单的如此写道：

$("tr:even").addClass("even");
$("tr").hover(
      function(){$(this).addClass("over")},
      function(){$(this).removeClass("over")}
      )

但是为了这么简单的效果引进jQuery库的话有点大炮打蚊子。用JS 实现一下就如下：

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 不行。所以只能写这么一堆无聊的代码了。

DEMO：http://nba.titan24.com/focus/kikx/hover.html