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 >