<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].onmouseover=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].onmouseover=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>