javascript 写的tab页代码

< html >

< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > Javascript Tab 页测试 </ title >
< style >
div.activetab
{
    position :  absolute ;
    padding : 5px ;
    text-align : center ;
    vertital-align : middle ;
    cursor : hand ;
    border : 1px solid #000000 ;
    border-bottom : 0px ;
    background-color : #ffffff ;
    color : #0000ff ;
    z-index : 3 ;
    width :  165px ;  
    height :  30px ;  
    left :  50px ;
    top :  55px ;
    
}
div.othertab
{
    position :  absolute ;
    padding : 5px ;
    text-align : center ;
    vertital-align : middle ;
    cursor : hand ;
    border : 1px solid #000000 ;
    background-color : #efefef ;
    z-index : 1 ;
    width :  165px ;  
    height :  30px ;  
    left :  214px ;
    top :  55px ;
    color : #000000 ;

}
div.mainlayer
{
    position :  absolute ;
    text-align : center ;
    vertital-align : middle ;
    cursor : hand ;
    border : 1px solid #000000 ;
    background-color : #ffffff ;
    z-index : 2 ;
    width : 600px ;
    height : 400px ;
    left : 50px ;
    top : 83px ;
    
}
</ style >
< script  language ="javascript" >
     function  ActiveTab(id,src)
    {
         var  oid  =   1 ;
         if (id  ==   1 )
            oid  =   2 ;
        
         var  activeTab  =  document.all[ " layer " + id];
         var  otherTab  =  document.all[ " layer " + oid];
        
         // activeTab.style.width = 200;
        activeTab.className  =   " activetab " ;
        otherTab.className  = " othertab " ;
        
        document.all[ " PlayListFrame " ].src  =  src;
        
    }
</ script >
</ head >

< body >

< div  class ="activetab"  id ="layer1"  onclick ="ActiveTab(1,'a.htm')" >
    Tab1    
</ div >
< div  class ="othertab"  id ="layer2"  onclick ="ActiveTab(2,'b.htm')" >
    Tab2
</ div >
< div  class ="mainlayer"  id ="MainLayer" >
       < iframe  id ="PlayListFrame"  frameborder ="0"  src ="a.htm"  style ="MARGIN:0px" >
         </ iframe >
</ div >

< div  style ="position: absolute; width: 604px; height: 33px; z-index: 4; left: 48px; top: 18px"  id ="layer3" >
　 </ div >
  
</ body >

</ html >

 

运行效果: