JavaScript特效5-完整tab选项卡

一.完整tab选项卡

//获取特点的class

        function getByClass(oPrent,oClass){

            //获取父元素下所有的元素
            var aEle = document.getElementsByTagName('*');

            var i    = 0;

            //定义空数组

        var aResult  = [];

            //遍历所有元素

            for (var i = 0; i < aEle.length; i++) {

                //判断
                if(aEle[i].className==oClass)

                {

                    //将所有的oClass存入空数组中

                    aResult.push(aEle[i]);

                }

            }

            //返回所要的数组

            return aResult;

        }

        window.οnlοad=function(){

            //获取父元素的id

            var oTab = document.getElementById('tab');

            //得到所有的类名为nav的元素

            var aNav = getByClass(oTab,'nav');

            //得到所有类名为box的元素

            var aBox = getByClass(aBox,'box')

            //获取nav下所有li元素
            var oLi  = aNav[0].getElementsByTagName('li');

            //alert(oLi.length);

            //遍历所有的li元素

            for (var i = 0; i < oLi.length; i++) {

                //记录当前li的下标
                oLi[i].index = i;

                oLi[i].οnclick=function(){

                    //初始化所有li和box的样式
                    for (var i = 0; i < oLi.length; i++) {
                        oLi[i].className='';
                        aBox[i].style.display='none';

                    }

                    //显示box

                    aBox[this.index].style.display='block';

                    //设置li的class

                    this.className='active';

                }
            }
        }