浅谈tab切换----原声JS封装函数

最近一直在研究原声JS,就简单tab切换，封装函数，总结以下：

html:

简单布局：

<div id='tab' class='tab'>
    <ul id='tabTit' class='tabTit'>
        <li class='select'>标题一</li>
        <li>标题二</li>
        <li>标题三</li>
    </ul>
    <div id='tabCon' class='tabCon'>
        <div class='show'>我对应标题1</div>
        <div>我对应标题2</div>
        <div>我对应标题3</div>
    </div>
</div>

css:
样式问题不做深入研究

*{margin: 0;padding: 0;}
.tab{width: 375px;margin: 25px auto;}
.tabTit li{ float: left;width: 123px;height: 38px;border: 1px solid #00f;text-align: center;background: #c9c9c9;line-height: 38px; list-style: none;}
.tabTit li:hover{background: #aaf;cursor: pointer;}
.tabTit .select{background: #99f;  }
.tabCon div{width: 373px;height: 400px;text-align: center;font-size: 36px;border: 1px solid #00f;border-top: none;display: none;}
.tabCon .show{display: block;}

JS:

// 原声JS封装tab切换
function tabChange(titID,conID,titShow,conShow){
    var titChild = document.getElementById(titID).children,
            conChild = document.getElementById(conID).children,len=titChild.length;
    //外层循环
    for(var i=0;i<len;i++){
        titChild[i].index = i;// 循环添加索引属性
        titChild[i].onclick=function(){
　　　　　　　// 内层循环
            for(var i=0;i<len;i++){
                titChild[i].className = '';
                conChild[i].className = '';
            }
            //当点击的时候，找到this所指向的对象，出发事件
            titChild[this.index].className = titShow;
            conChild[this.index].className = conShow;
        }
    }
}
tabChange('tabTit','tabCon','select','show');

完毕！
写了这么多，就是希望大家对原声JS有进一步的了解，一贯用惯了各大框架，却忽略了原声JS的魅力，实在得不偿失，大家共同进步！（为什么老提醒我随笔不满150字呢？莫非英文不算！）