<style> *{ margin:0; padding:0; } ul{ list-style:none; overflow:hidden; } ul li{ 100px; height:40px; border:1px solid black; float:left; text-align:center; line-height:40px; } div{ display:none; 406px; height:406px; border:1px solid black; } .active{ display:block; } .active1{ background:yellow; } </style>
<ul> <li class="active1">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div class="active">111111</div> <div>222222</div> <div>333333</div> <div>444444</div> <script> // var oLi = document.getElementsByTagName("li"); // var oDiv = document.getElementsByTagName("div"); // for(var i=0;i<oLi.length;i++){ // oLi[i].index = i; // oLi[i].onclick = function(){ // for(var j=0;j<oDiv.length;j++){ // oDiv[j].className = ""; // } // oDiv[this.index].className = "active"; // } // } function tab(obj1,obj2){ this.obj1 = obj1; this.obj2 = obj2; } tab.prototype.tabchange = function(fn){ for(var i=0;i<this.obj1.length;i++){ this.obj1[i].index = i; var that = this; this.obj1[i].onclick = function(){ for(var j=0;j<that.obj2.length;j++){ that.obj2[j].className = ""; } that.obj2[this.index].className = "active"; if(fn){ fn(this); } } } } window.onload = function(){ var oLi = document.getElementsByTagName("li"); var oDiv = document.getElementsByTagName("div"); var oTab = new tab(oLi,oDiv); oTab.changeColor = function(that){ for(var i=0;i<oTab.obj1.length;i++){ oTab.obj1[i].className = ""; } oTab.obj1[that.index].className = "active1"; } oTab.tabchange(oTab.changeColor); } </script>