JS 选项卡 标记当前

早先写过一篇文章说 标记当前，和选项卡，几乎是目前所有常见网页效果应用的本质，其实 选项卡也是一种形式的标记当前，只不过这种标记是标记的显示状态罢了。
今天我们用JS的方法写一下这些常用的函数，使它们使用起来更加方便：
标记当前 function cur(ele,cls){} 接受两个函数 一个是ele 要标记的元素 或者 一个选择符，cls是标记的类名 一个css class 默认为"cur";
选项卡 function tab(idtab,tagtab,idcon,tagcon,act,cls,idx){} 接受的参数比较多
idtab:控制触发选项卡的容器
idtag:控制触发选项卡的标签
idcon:被控制的内容容器idtag:被控制的内容标签act: 触发方式 默认为 onclick
cls:标记当前的css class 默认为 “cur”
idx:默认显示第几项 默认为0 首项

http://nba.titan24.com/focus/kikx/jstab.html  
函数如下：

function cur(ele,cls){
        return new cur.prototype.init(ele,cls);
    }
    cur.prototype={
        init:function(ele,cls){
            this.idx=0;            
            this.mark= cls? " "+cls:"cur";
            this.ele= typeof ele=="object"? ele:document.getElementById(ele);            
            this.hdlr.call(this);    
            return this.idx;        
        },
        hdlr:function(){
            this.addCls();
            this.rmvCls();
        },
        addCls:function(){
            this.ele.className+=this.mark;
        },
        rmvCls:function(){
            var itm=this.ele;
            var prn=itm.parentNode;            
            var itms=prn.getElementsByTagName(itm.nodeName);
            for(i=0; i<itms.length; i++){
                if(itms[i]!==itm){                    
                    itms[i].className=itms[i].className.replace(this.mark,"");
                }else{
                    this.idx=i;
                }                
            }            
        }        
    }
    cur.prototype.init.prototype=cur.prototype;
    
    function tab(idtab,tagtab,idcon,tagcon,act,cls,idx){
        return new tab.prototype.init(idtab,tagtab,idcon,tagcon,act,cls,idx);
        }
    tab.prototype={
        init:function(idtab,tagtab,idcon,tagcon,act,cls,idx){
            this.tabid=document.getElementById(idtab);
            this.tabtag=this.tabid.getElementsByTagName(tagtab);
            this.conid=document.getElementById(idcon);
            this.contag=this.conid.getElementsByTagName(tagcon);
            this.cls=cls || "cur";
            this.act=act || "onclick";
            this.idx=idx || 0;            
            this.hdlr.call(this);
            },
        hdlr:function(){    
            this.change.call(this);            
            for(var i=0; i<this.tabtag.length; i++){    
                    var othis=this;
                    (function(){                        
                        var ii=i;
                        othis.tabtag[ii][othis.act]=function(){
                         if(!this.className.match(othis.cls)){
othis.idx= ii;  othis.change.call(othis);    
}                    
                    }                    
                    })()
                }
            },
        hide:function(){
            this.style.display="none";
            },
        show:function(){
            this.style.display="";
            },
        change:function(){
            cur(this.tabtag[this.idx]);
            for(var i=0; i<this.contag.length; i++){
                if(i!==this.idx){
                    this.hide.call(this.contag[i]);
                    }else{
                    this.show.call(this.contag[i]);
                    }
                }                
            }                
        }
        
    tab.prototype.init.prototype=tab.prototype;
    //使用范例：
    tab("comtab","li","comcon","div","onmouseover",0,2);
    tab("comtab2","li","comcon2","div");
        //

http://nba.titan24.com/focus/kikx/jstab.html