js 选型卡

var tool={

    removeClass:function(o,c){
        var rep=o.className.match(' '+c)?' '+c:c;
        o.className=o.className.replace(rep,'');
    },
    addClass:function(o,c){
        var test = new RegExp("(^|\\s)" + c + "(\\s|$)").test(o.className);
        if(!test){o.className+=o.className?' '+c:c;}
    },
    cancelClick:function(e){
        if (window.event){
            window.event.cancelBubble = true;
            window.event.returnValue = false;
        }
        if (e && e.stopPropagation && e.preventDefault){
            e.stopPropagation();
            e.preventDefault();
        }
    },
    getClass:function(eleClassName,type){
        var getEleClass = [];
        var myclass = new RegExp("\\b"+eleClassName+"\\b");
        var elem = document.getElementsByTagName(type||"*");
        for(var h=0;h<elem.length;h++){
            var classes = elem[h].className;
            if (myclass.test(classes)) {getEleClass.push(elem[h]);}
        }
        return getEleClass;
    },
    each:function(list,fun){
        for(var i=0,len=list.length;i<len;i++){
            fun(list[i])
        }
    },
    getChild:function(ele){
        var childs=[];
        var divs=document.getElementById(ele);
        for(var i=0,len=ele.childNodes.length;i<len;i++){
            if(ele.childNodes[i].nodeType==1){
                childs.push(ele.childNodes[i])
            }
        }
        return childs
    },
    next:function(elem){
        if(!elem){return false};
        do{
            elem=elem.nextSibling;
        }while(elem&&elem.nodeType!=1);
        return elem;
    }
}

 

function tab(o){
    var uls=tool.getClass(o);
    tool.each(uls,get);
    function get(_uls){
        var ls=tool.getChild(_uls);
        var ds=tool.next(_uls);
        var ds_div=tool.getChild(ds);
        for(var i=0;i<ls.length;i++){
            (function(){
                var ii=i;
                ls[ii].old=ls[ii].className.replace("on","");
                ds_div[ii].old=ds_div[ii].className.replace("show","");
                ls[ii].onmouseover=function(){
                    setTimeout(function(){
                        go_to(ii);
                    },300)
                }
            }) ()
        };
        function go_to(prsv){
            for(var i=0;i<ls.length;i++){
                ls[i].className=ls[i].old;
                ds_div[i].className=ds_div[i].old;
            };
            tool.cancelClick(prsv)
            tool.addClass(ls[prsv],"on")
            tool.addClass(ds_div[prsv],"show")
        }
    };
}

window.onload=function(){
    tab("sub_Tabs")
}

 

<ul class="sub_Tabs">

 <li class="on"><a href="#">专项工作研究</a></li>

 <li><a href="#">专项工作</a></li>

</ul>



<ul class="sub_Tabs_On">

<li class="show">1</li>

<li>2</li>

</ul>