<! 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 > 转载于:https://www.cnblogs.com/yiki/archive/2007/09/11/889808.html