原生JS 选项卡代码实现

可实现同页面多个选项卡

效果图：

代码实现：

HTML部分

<div class="main" id="tabs">
            <div class="tabDiv">
                <a href="javascript:;" class="on">选项一</a>
                <a href="javascript:;">选项二</a>
                <a href="javascript:;">选项三</a>
            </div>
            <div class="con">
                1111111111111111111111111
            </div>
            <div class="con">
                2222222222222222222222222
            </div>
            <div class="con">
                3333333333333333333333333
            </div>
        </div>
        
        <div class="main" id="tabs1">
            <div class="tabDiv">
                <a href="javascript:;" class="on">选项一</a>
                <a href="javascript:;">选项二</a>
                <a href="javascript:;">选项三</a>
            </div>
            <div class="con">
                1111111111111111111111111
            </div>
            <div class="con">
                2222222222222222222222222
            </div>
            <div class="con">
                3333333333333333333333333
            </div>
        </div>

 JS代码

fnTab("tabs");
            fnTab("tabs1");
            
            function fnTab(id){
                var parentEle = document.getElementById(id);
                var tabTools = getByClass(parentEle,"tabDiv")[0].getElementsByTagName("a");
                var conArr = getByClass(parentEle,"con");
                conArr[0].className += " active";
                for(var i=0;i<tabTools.length;i++){
                    (function(i){
                        tabTools[i].onclick = function(){
                            for(var j=0;j<conArr.length;j++){
                                removeClass(tabTools[j],"on");
                                removeClass(conArr[j],"active");
                            }
                        addClass(tabTools[i],"on");
                        addClass(conArr[i],"active");
                        }
                    })(i);
                    
                }
                
                
            }

            function getByClass(oParentEle,sClass){
                if(oParentEle.getElementsByClassName){
                    var oEles = oParentEle.getElementsByClassName(sClass);
                    return oEles;
                }else{
                    var oEles = oParentEle.getElementsByTagName("*");
                    var aRes = [];
                    for(var i=0;i<oEles.length;i++){
                        if(oEles[i].className == sClass){
                            aRes.push(oEles[i]);
                        }
                    }
                    return aRes;
                }
                
            }
            function addClass(ele,className){
                if(ele && ele.nodeType == 1){
                    var reg = new RegExp("\b"+className +"\b","g");
                    if(!reg.test(ele.className)){
                        ele.className += " "+className;
                    }
                }
                
            }
            function removeClass(ele,className){
                if(ele && ele.nodeType == 1){
                    var reg = new RegExp("\b"+className +"\b","g");
                if(reg.test(ele.className)){
                    ele.className = ele.className.replace(reg,"");
                }
                }
                
            }