<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>tab选项卡切换代码演示</title> <mce:style type="text/css"><!-- body { font-family: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif; text-align: center; } td { font-size: 12px; color: #333; } .solid-bottom { border-bottom: #dddddd 1px solid; } .sec1{ background-color: #F4F4F4; 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: #EAEAEA; cursor: hand; color: #58A200; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray; font-weight: bold; } --></mce:style><style type="text/css" mce_bogus="1">body { font-family: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif; text-align: center; } td { font-size: 12px; color: #333; } .solid-bottom { border-bottom: #dddddd 1px solid; } .sec1{ background-color: #F4F4F4; 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: #EAEAEA; cursor: hand; color: #58A200; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray; font-weight: bold; }</style> </head> <body> <table width="400" border="0" cellpadding="0" cellspacing="0" class="solid-bottom"> <tr> <td width="383" height="19"> <table border="0" cellpadding="0" cellspacing="0" id="secTable"> <tr> <td width="70" align="center" class="sec2" οnclick="secBoard(0)"> AveIcon </td> <td width="120" align="center" class="sec1" οnclick="secBoard(1)"> SWF_Decompiler </td> <td width="110" align="center" class="sec1" οnclick="secBoard(2)"> FlashCatcher </td> </tr> </table> </td> <td width="17"> <mce:script language="JavaScript" type="text/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"; } // --></mce:script> </td> </tr> </table> <table border="0" cellspacing="5" cellpadding="0" width="400" height="120" id="mainTable"> <tbody style="display:block;" mce_style="display:block;"> <tr> <td height="120"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="72">aaaaaaaaaaaaaaaaaaaaa </td> </tr> <tr> </tr> </table></td> </tr> </tbody> <tbody style="display:none;" mce_style="display:none;"> <tr> <td height="120"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="72">bbbbbbbbbbbbbbbbbbbb</td> </tr> <tr> </tr> </table></td> </tr> </tbody> <tbody style="display:none;" mce_style="display:none;"> <tr> <td height="120"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="72"> cccccccccc </td> </tr> <tr> </tr> </table></td> </tr> </tbody> <tbody style="display:none;" mce_style="display:none;"> </tbody> </table> </body> </html>