html+css 选项卡

 

< style  type =text/css >
td  {  
  font-size :  12px ;
  color :  #000000 ;
  line-height :  150% ;
   }
.sec1  {  
  background-color :  #EEEEEE ;
  cursor :  hand ;
  color :  #000000 ;
  border-left :  1px solid #FFFFFF ;
  border-top :  1px solid #FFFFFF ;
  border-right :  1px solid gray ;
  border-bottom :  1px solid #FFFFFF
   }
.sec2  {  
  background-color :  #D4D0C8 ;
  cursor :  hand ;
  color :  #000000 ;
  border-left :  1px solid #FFFFFF ;  
  border-top :  1px solid #FFFFFF ;  
  border-right :  1px solid gray ;  
  font-weight :  bold ;  
   }
.main_tab  {
  background-color :  #D4D0C8 ;
  color :  #000000 ;
  border-left : 1px solid #FFFFFF ;
  border-right :  1px solid gray ;
  border-bottom :  1px solid gray ;  
   }
</ style >
    < script  language =javascript >
function  secBoard(n)
{
  for (i = 0 ;i < secTable.cells.length;i ++ )
  secTable.cells[i].className = " sec1 " ;
 secTable.cells[n].className = " sec2 " ;
  for (i = 0 ;i < mainTable.tBodies.length;i ++ )
  mainTable.tBodies[i].style.display = " none " ;
 mainTable.tBodies[n].style.display = " block " ;
}
</ script >
    < table  border =0  cellspacing =0  cellpadding =0  width =549  id =secTable >
     < tr  height =20  align =center >  
      < td  class =sec2  width =10%  onclick ="secBoard(0)" > 关于TBODY标记 </ td >
      < td  class =sec1  width =10%  onclick ="secBoard(1)" > 关于cells集合 </ td >
      < td  class =sec1  width =10%  onclick ="secBoard(2)" > 关于tBodies集合 </ td >
      < td  class =sec1  width =10%  onclick ="secBoard(3)" > 关于display属性 </ td >
     </ tr >
    </ table >
    < table  border =0  cellspacing =0  cellpadding =0  width =549  height =240  id =mainTable  class =main_tab >
     < tbody  style ="display:block;" >  
     < tr >  
      < td  align =center  valign =top >   < br >
       < br >
      这里填加内容，略去。1  </ td >
     </ tr >
     </ tbody >   < tbody  style ="display:none;" >  
     < tr >  
      < td  align =center  valign =top >   < br >
       < br >
      这里填加内容，略去。2  </ td >
     </ tr >
     </ tbody >   < tbody  style ="display:none;" >  
     < tr >  
      < td  align =center  valign =top >   < br >
       < br >
      这里填加内容，略去。3  </ td >
     </ tr >
     </ tbody >   < tbody  style ="display:none;" >  
     < tr >  
      < td  align =center  valign =top >   < br >
       < br >
      这里填加内容，略去。4  </ td >
     </ tr >
     </ tbody >  
    </ table >