[위 에] javascript 고전 사례 대상 을 위 한 옵션

<style>
#div1 input{ background:white;}
#div1 input.active{ background:yellow;}
#div1 div{ width:200px; height:200px; background:#ccc; display:none;}
</style>

<script>
window.onload=function(){            //      ：window.onload= 
    new TaWny('div1');               //      ：TaWny('div1')  
};
function TaWny(id){                  //      ：
    var _this = this;                //         this
    var oDiv=document.getElementById(id);               //    TaWny('div1')       
    this.aBtn=oDiv.getElementsByTagName('input');
    this.aDiv=oDiv.getElementsByTagName('div');
for(var i=0; i<this.aBtn.length; i++){
   this.aBtn[i].index=i;
   this.aBtn[i].onmouseover=function(){                 //    _this.ofclick(this);  
   _this.getonmouse(this);                              //         this  
  };                                                    //      ：      
 }
};
TaWny.prototype.getonmouse=function (aBtn){              //   prototype              
  for( var i=0; i<this.aBtn.length; i++){
                    this.aBtn[i].className='';          //  
                    this.aDiv[i].style.display="none";  
  }
     aBtn.className='active';                     //  
     this.aDiv[aBtn.index].style.display='block';
};
</script>
<div id="div1">
<input class="active" type="button" value="  1" />
<input  type="button" value="  2" />
<input  type="button" value="  3" />


<div style="display:block;" >   11111111</div>
<div>     222222</div>
<div>     3333</div>