See a lot of netizens on the tbody properties of the discussion, I deliberately made an example, I hope to be helpful to everyone.
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <ptml> <pead> <title> Cloud-Habitat Community t The Body tab effect demo </title> <meta http-equiv= "Content-type" content= text/html; charset=gb2312 "> <meta name=" generator "content=" EditPlus "> <meta name=" Author "content=" Tian Geng "> <met A name= "Keywords" content= "" > <meta name= "Description" content= "" > <style type= "text/css" > Body,table , tr,td{font-size:12px; Color: #000000; }. sec1 {background-color: #99CC99; 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,x,y) {for (i=0;i<sectab le.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";} Weizi.innerhtml= "<b>" +x.touppercase () + "</b> Pavilion <b>" +y+ "</b> Floor Hall"; //--> </script> </pead> <body bgcolor= "#FFFFFF" text= "#000000" leftmargin= "0" topmargin= "0" ; <table width= "588" border= "0" cellspacing= "1" cellpadding= "4" align= "center" > <tr> <td width= "82 % > Current Position: Pavilion distribution > <span id= "Weizi" ><b>A</b> Hall <b>1</b> Building Gallery </span></td> <TD width= "18%" > </td> </tr> <tr> <td colspan= "2" height= "1" bgcolor = "#000000" ></td> </tr> <tr> <td colspan= "2" height= "4" ></td> </TR&G T <tr> <td colspan= "2" > <table border=0 cellspacing=0 cellpadding=0 width=578 id=sectable> <tr height=20 align=center> <td class=sec2 width=10% onclick= "secboard (0, ' a ', ' 1 ')" >a Pavilion 1 Floor Hall </td> <td class=sec1 width=10% onclick= "Secboard (1, ' A ', ' 2 ')" >a Hall 2 floor exhibition Hall </td> TD Class=sec1 Width=10% onclick= "Secboard (2, ' B ', ' 1 ')" >b Pavilion 1 floor showroom </td> <td class=sec1 width=10% oncli Ck= "Secboard (3, ' B ', ' 2 ')" >b Pavilion 2 floor exhibition hall </td> <td class=sec1 width=10% "onclick=" (4, ' C ', ' 1 ') "Secboard exhibition Hall 1 Floor </td> <td class=sec1 width=10% onclick= "Secboard (5, ' C ', ' 2 ')" >c Hall 2 floor exhibition Hall </td> ;/tr> </table> <table border=0 cellspacing=0 cellpadding=0 width=578 height=160 id=maintable class=main_tab> ; <tbody > <tr> <td align= "center" > One </td> </tr> </tbody> <tbody > <tr> <td align= "center" > bis </td> </tr> </tbody> <tbody > <tr> <TD align= "center" > Three </td> </tr> </tbo dy> <tbody > <tr> <td align= "center" > Four </TD&G T </tr> </tbody><tbody > <tr> <td align= "center" > Five </td> </tr> </tbody><tbody > <tr> <TD align= "center" > Six </td> </tr> </tbody> </table> </td> </tr> </table> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
