js选项卡修改成面向对象

<style>

 .display{display:block}

div{display:none}

</style>

var li=document.getElementsByTagName("li");

var div=document.getElementsByTagName("div");

cc(li,div);

function cc(li,div){

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

li[i].index=i;

li[i].οnmοuseοver=function(){

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

div[i].className=""

}

div[this.index].className="display"

}

}

}

//修改成面向对象

function tab(name,div){

this.li=document.getElementsByTagName(name);

this.div=document.getElementsByTagName(div);

} 

tab.prototype.init=function(){

var This=this;//把this保存给他

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

this.li[i].index=i;

this.li[i].οnmοuseοver=function(){

This.change(this);//传个this给change函数

}

}

}

tab.prototype.change=function(obj){

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

this.div[i].className="";

}

this.div[obj.index].className="display"

}

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

<div class="display">1</div>

<div>2</div>

<div>3</div>

<div>4</div>