一个简单的javascript Tab选项卡切换控件

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 无标题文档 </ title >
< style  type ="text/css" >

.tabBox {  width : 200px ;  height : 200px ;  border : 1px solid #ccc ; }
.tab {  color : #00F }
.on {  color : #F00 ;  font-weight : bold }
.panel {}
.none { display : none }
</ style >
</ head >
< body >
< div  class ="tabBox" >
   < ul  id ="tabs" >
     < li  class ="tab on" >< a  href ="#" > A </ a ></ li >
     < li  class ="tab" >< a  href ="#" > B </ a ></ li >
     < li  class ="tab" >< a  href ="#" > C </ a ></ li >
   </ ul >
   < div  id ="panels" >
     < div  class ="panel" > T_A </ div >
     < div  class ="panel none" > T_B </ div >
     < div  class ="panel none" > T_C </ div >
   </ div >
</ div >

< script  type ="text/javascript" >
( function (){
     function  TabView() {
         this .tabs  =  [];
         this .panels  =  [];
         this .eventName  =   "" ;
    }
    
    TabView.prototype.init  =   function  (eventName,onFocusClassName){
         var  tabs  =   this .tabs;
         var  panels  =   this .panels;
        eventName  =  eventName  ||   " mouseover " ;
         for ( var  i = 0 ; i < tabs.length; i ++ )
        {
            tabs[i].key  =  i
            tabs[i][ " on " + eventName]  =   function (){
                 // clear tabs
                 for ( var  j  =   0 ; j < tabs.length;j ++ )
                {
                    tabs[j].className  =  tabs[j].className.replace(eval( " / ? " + onFocusClassName + "  ?/ " ), "" );
                }
                
                 // clear panels
                 for ( var  j  = 0  ;j < panels.length;j ++ ){
                    panels[j].style.display  =   " none " ;
                }
                
                 // set
                 this .className  +=   "   " +  onFocusClassName;
                panels[ this .key].style.display  =   " block "
            }
        }
    }
    window.TabView  =  TabView;          
})();

var  test  =   new  TabView();
test.tabs  =  document.getElementById( " tabs " ).getElementsByTagName( " li " );
test.panels  =  document.getElementById( " panels " ).getElementsByTagName( " div " );
test.init( " click " , " on " );
</ script >
</ body >
</ html >