<!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><title> new document </title><meta name="generator" content="editplus" /><meta name="author" content="" /><meta name="keywords" content="" /><meta name="description" content="" />
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */#modernbricksmenu{
padding: 0;width: 100%;background: transparent;
voice-family: "\"}\"";voice-family: inherit;}#modernbricksmenu ul{font: bold 11px Arial;margin:0;margin-left: 40px; /*margin between first menu item and left browser edge*/padding: 0;list-style: none;}#modernbricksmenu li{display: inline;margin: 0 2px 0 0;padding: 0;text-transform:uppercase;}#modernbricksmenu a{float: left;display: block;color: white;margin: 0 1px 0 0; /*Margin between each menu item*/padding: 5px 10px;text-decoration: none;letter-spacing: 1px;background-color: black; /*Default menu color*/border-bottom: 1px solid white;}#modernbricksmenu a:hover{background-color: gray; /*Menu hover bgcolor*/}#modernbricksmenu #current a{ /*currently selected tab*/background-color: #D25A0B; /*Brown color theme*/border-color: #D25A0B; /*Brown color theme*/}#modernbricksmenuline{clear: both;padding: 0;width: 100%;height: 5px;line-height: 5px;background: #D25A0B; /*Brown color theme*/
}</style></head><body><div id="modernbricksmenu"><ul><li style="margin-left: 1px"><a href="http://www.dynamicdrive.com" title="Home">Home</a></li><li><a href="http://www.dynamicdrive.com/new.htm" title="New">New</a></li><li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised">Revised</a></li><li><a href="http://tools.dynamicdrive.com" title="Tools">Tools</a></li><li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">Forums</a></li></ul></div><div id="modernbricksmenuline"> </div></body></html><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>