我也来个TAB [复制链接]

先上效果
http://www.zhouein.com/cn/lanmu_11.html


<style type="text/css">
    .hidden{display:none;}
    .select{color:red;}
    .select2{colorreen;}
</style>

<div><a href="#" id="t6" class="select">tab6</a>
<a href="#" id="t7">tab7</a>
<a href="#" id="t8">tab8</a>
</div>
<div>
<div id="c6">4444444444444444444444444444444<bar>5555555555555555555555555555555<br>66666666666666666666666666666</div>
<div class="hidden" id="c7">111111111111111111111111111111<br>22222222222222222222222222222<bar>333333333333333333333333333333333333</div>
<div class="hidden" id="c8">777777777777777777777777777777777<br>88888888888888888888888888<br>9999999999999999999999999</div>
</div>
<script type="text/javascript">
function Tab(itemList,config){
    if(config){
        var activeClass = config.activeClass || "selected";
        var act = config.act || "mouseover";
    } else {
        var activeClass = "selected";
        var act = "mouseover";
    }
    this.index = 0;
    this.labelList = [];
    this.contentList = [];
    this.count = itemList.length;
    var scope = this;
    var handler = function(){
        scope.activeHandle(this,scope,activeClass);
    }
    for(var i=0,n=this.count;i<n;i++){
        var label = this.$(itemList.label);
        var content = this.$(itemList.content);
        label.index = content.index = i;
        this.labelList.push(label);  
        this.contentList.push(content);
        if(act == "mouseover"){  
            label.onmouseover = handler;
        } else if(act == "click") {  
            label.onclick = handler;;
        }
    }
    if(config.auto){
        var oTime = config.time || 3000;
        setInterval(function(){
            scope.index++;
            if(scope.index >= scope.count){
                scope.index = 0;
            }
            scope.showContent(scope.index,activeClass);
        },oTime);
    }
}
Tab.prototype = {
    $ : function(id){
        return document.getElementById(id);
    },
    activeHandleunction(target,scope,activeClass){
        var index = target.index;
        var str = activeClass;
        scope.index = index;
        scope.showContent.call(scope,index,str);
    },
    showContentunction(index,str){
        for(var i=0,n=this.labelList.length;i<n;i++){
            if(this.labelList.className.indexOf(str)!=-1){  
                this.labelList.className = this.labelList.className.split(str).join("");
                this.contentList.style.display = "none";
            }
        }
        this.labelList[index].className = this.labelList[index].className + " " + str;
        this.contentList[index].style.display = "block";
    }  
}

new Tab([{label:"t6",content:"c6"},{label:"t7",content:"c7"},{label:"t8",content:"c8"}],

{activeClass:"select",auto:true});

</script>