转帖，javascript+css 标签显示方式的思考收藏

<! 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"   />
</ head >
< body >
< script  type ="text/javascript" >
   // <![CDATA[ 
   // 标签的数组,如果让我写,我想不到会用这个保存 
   var  tabArray  =   new  Array();
   // 默认显示哪个标签 
   function  showDefaultTab() {
     // show 'Description' tab by default, else show first 
     if  ( ! showTab( ' item1 ' )) {
      displayToggle(tabArray[ 0 ]  +   " _container " ,  true ,  ' container on ' );
      document.getElementById(tabArray[ 0 ]).className  =   ' selected ' ;
    }
  }
   // 改变内容盒的隐显,并重绘显示样式:感觉有点像配适器模式 
   function  showTab(tabID) {
     var  found  =   false ;
     for  ( var  i  =   0 ; i  <  tabArray.length; i ++ ) {
       if  (tabArray[i]  !=  tabID) {
        displayToggle(tabArray[i]  +   " _container " ,  false ,  ' container ' );
        document.getElementById(tabArray[i]).className  =   '' ;
      }  else  {
        displayToggle(tabArray[i]  +   " _container " ,  true ,  ' container on ' );
        document.getElementById(tabArray[i]).className  =   ' selected ' ;
        found  =   true ;
      }
    }
     return  found;
  }
   // showtab函数会调用这个函数来隐显内容盒         
   function  displayToggle(id, show, newClass) {
     var  obj  =  document.getElementById(id);
     if  (obj  !=   null ) {
       if  (show) {
        obj.style.visibility  =   " visible " ;
        obj.style.display  =   " block " ;
      }  else  {
        obj.style.visibility  =   " hidden " ;
        obj.style.display  =   " none " ;
      }

       if  (newClass  !=   null )
        obj.className  =  newClass;
    }
  }
   // ]]> 
</ script >
< div  id ="sitepage" >  
     < div  id ="productBSS"  class ="tabwidget" >  
         < ul  class ="tabs" >  
             < li  id ="item1" >  
                 < a  id ="info3"  href ="#info3"  onclick ="showTab('item1'); return false;" > Description </ a >  
             </ li >  
             < script  language ="JavaScript" >  
                tabArray.push( ' item1 ' ); 
             </ script >  
              < li  id ="item2" >  
                  < a  id ="info8"  href ="#info8"  onclick ="showTab('item2'); return false;" > Sample Content </ a >  
              </ li >  
              < script  language ="JavaScript" >  
                 tabArray.push( ' item2 ' ); 
              </ script >  
          </ ul >  
      </ div >  
      < div  id ="bssContent" >  
          < div  id ="item1_container" >  
              <!-- detail content -->  
          </ div >  
          < div  id ="item2_container" >  
              <!-- detail content -->  
          </ div >  
      </ div >  
     < script  language ="JavaScript" >
        showDefaultTab();
     </ script >  
  </ div >
 
< style  type ="text/css" >  
<!-- 
  body  { margin : 150px 0 0 0 ; font-size : 0.8em ; font-family : "Lucida Grande", Arial, Helvetica, sans-serif ; }  
  div#sitepage {  margin : 0 0 0 184px ;  padding : 0 ;  width : 400px ; height : auto ; }  
  div#productBSS  {  clear : both ;   }  
  div#bssContent  {  margin : -1px 0 0 0 ;  padding : 1em ;  border-right : 1px solid #C7C8CA ;  border-left : 1px solid #C7C8CA ;   border-bottom : 1px solid #C7C8CA ;  border-top : 1px solid #C7C8CA ;   }  
   /*  - Tab Widget (blog sidebar) -  */  
  div.tabwidget  {  border-left :  1px solid #C7C8CA ;  position :  relative ;   }  
   /*  tab control  */  
  div.tabwidget ul.tabs  {  list-style :  none ;  margin :  0 ;  padding :  0 0 1px 0 ;  height :  2em ;  border-bottom :  1px solid #C7C8CA ;   }  
  div.tabwidget ul.tabs li  {  display :  block ;  float :  left ;  background-color : #EEE ;  border :  1px solid #C7C8CA ;  border-width :  1px 1px 1px 0 ;  padding :  0 1em ;  line-height :  2em ;  margin :  0 ;   }  
  div.tabwidget ul.tabs li.selected  {  background-color :  #FFF ;  border-bottom :  1px solid #FFF ;   }  
   /*  layer control  */  
  div.tabwidget div.container  {  display :  none ;  clear :  both ;  border :  1px solid #C7C8CA ;  border-width :  0 1px 1px 0 ;  position :  relative ;   }  
  div.tabwidget div.on  {  display :  block ;   }  
   /*  Content control  */  

  :link,:visited  {  text-decoration : none ;   }  
  a:link  {  color : #004F7F ;   }   
  a:visited  {  color : #2E87B2 ;   }  
  a:hover, a:active  {  color : #004F7F ;  text-decoration : underline ;   }  
--> 
</ style >

</ body >
</ html >