使用js写一个tabs

         <div class="content" id="tabContent">
            <ul class="tabs" id="tabs">
                <li style="color: red;">标签1</li>
                <li>标签2</li>
                <li>标签3</li>
                <li>标签4</li>
            </ul>
            <div class="contentBlock active" style="display: block;" >
                111
            </div>
            <div class="contentBlock active" style="display: none;" >
                222
            </div>
            <div class="contentBlock active" style="display: none;" >
                333
            </div>
            <div class="contentBlock active" style="display: none;" >
                444
            </div>
        </div>
        <script>
            function Tabs(id){
                var tabContent = document.getElementById(id);
                var tabs = tabContent.getElementsByClassName("tabs")[0];
                this.lis = tabs.getElementsByTagName("li");
                this.divContentBlock = tabContent.getElementsByClassName("contentBlock");
                for(var i =0;i<this.lis.length;i++){
                    var slef = this;
                    slef.lis[i].num = i; //将每个lis[i]对象都增加一个num属性，保存他当前的i
                    this.lis[i].onclick = function(){
                        slef.tabChange(this.num)
                    }
                }
            }
            Tabs.prototype.tabChange = function(j){
                for(var i=0;i<this.lis.length;i++){
                    this.lis[i].style.color="black";
                    this.divContentBlock[i].style.display="none";
                }
                this.lis[j].style.color="red";
                this.divContentBlock[j].style.display="block"
            }
            new Tabs("tabContent")
         </script>