动态标签实现源码

类似于网易的动态切换效果:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
     < head >
         < title > TEST.html </ title >
         < style  type ="text/css" >
            body  {
                font-size :  12px ;
                line-height :  150% ;
             }
            
            table  {
                font-size :  12px ;
                line-height :  150% ;
             }
            
            a:link  {
                color :  #000 ;
                text-decoration :  none
             }
            
            a:visited  {
                color :  #000 ;
                text-decoration :  none
             }
            
            a:active  {
                color :  #000 ;
                text-decoration :  none
             }
            
            a:hover  {
                color :  #ff0000 ;
                text-decoration :  underline
             }
            
            .s01  {
                border :  #6BA6DE 1px solid ;
                border-bottom :  0px ;
                background :  #eff7ff ;
                padding-top :  1px
             }
            
            .s02  {
                border :  #ffffff 1px solid ;
                border-bottom :  #6BA6DE 1px solid ;
                background :  #ffffff ;
             }
         </ style >

         < script  language ="javascript" >  
             function  secBoard(n) 
            { 
                 for (i = 1 ;i < 5 ;i ++ ) 
                { 
                    eval( " document.getElementById('cl0 " + i + " ').className='s02' " ); 
                    eval( " tbx0 " + i + " .style.display='none' " ); 
                } 
                eval( " document.getElementById('cl0 " + n + " ').className='s01' " ); 
                eval( " tbx0 " + n + " .style.display='block' " ); 
            } 
         </ script >
     </ head >

     < body >
         < table  width ="247"  border ="0"  cellpadding ="0"  cellspacing ="0"
            id ="secTable" >
             < tr  align ="center" >
                 < td  id ="cl01"  width ="60"  class ="s01"  onClick ="secBoard(1);"
                    style ="cursor: hand" >
                    选项卡1
                 </ td >
                 < td  id ="cl02"  width ="60"  class ="s02"  onClick ="secBoard(2);"
                    style ="cursor: hand" >
                    选项卡2
                 </ td >
                 < td  id ="cl03"  width ="60"  class ="s02"  onClick ="secBoard(3);"
                    style ="cursor: hand" >
                    选项卡3
                 </ td >
                 < td  id ="cl04"  width ="60"  class ="s02"  onClick ="secBoard(4);"
                    style ="cursor: hand" >
                    选项卡4
                 </ td >

             </ tr >
         </ table >
         < table  width ="247"  height ="200"
            style ="border: #6BA6DE 1px solid; border-top: 0px;" >
             < tr >
                 < td  height ="20" >
                    这还可以放固定不变的东西，如果要加上，去掉注释符
                 </ td >
             </ tr >
             < tr >
                 < td  valign ="top"  style ="padding-top: 5px;" >
                     < div  style ="display: "  id ="tbx01" >
                        这个里面可以放你需要的东西，如果有多个选项卡的话可以适量修改代码就可以了
                     </ div >
                     < div  style ="display: none; height: 300"  id ="tbx02" >
                        具体的大小你自己调，我这做的很明显，注意上面表格和下面表格宽度要一样，下面一个表格的高度随便改，最好手动修改本代码，即不要用 DW
                        等工具调大小
                     </ div >
                     < div  style ="display: none; height: 400"  id ="tbx03" >
                        所有的样式呀什么的，你都可以自己改，不懂的再问我
                     </ div >
                     < div  style ="display: none;"  id ="tbx04" >
                        嘿嘿，专为
                         < font  color ="#ff0000" > ..... </ font >  设计制作
                     </ div >
                 </ td >
             </ tr >
         </ table >

     </ body >
</ html >