来看看这段代码啊，我不会改了

Question

<STYLE type=text/css>.sec1 {
BORDER-RIGHT: ; CURSOR: hand; COLOR: #000000; 
}
.sec2 {
BORDER-RIGHT: ; FONT-WEIGHT: bold; CURSOR: hand; COLOR: #000000; 
}
.main_tab {
BORDER-RIGHT: ;  COLOR: #000000; BORDER-BOTTOM: gray 1px solid; 
}
</STYLE>
<!--JavaScript部分-->
            <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>
<!--HTML部分-->
              <TABLE id=secTable width=300 border=0>
              <TBODY>
              <TR align=middle height=20>
                <TD class=sec2 onclick=secBoard(0) width="10%">Product Info</TD>
                <TD class=sec1 onclick=secBoard(1) width="10%">Service</TD>
                </TR></TBODY></TABLE>
            <TABLE height=142 width=510 border=0><!--关于TBODY标记-->
              <TBODY style="DISPLAY: block">
              <TR>
                <TD width="332" align=middle vAlign=top bordercolor="#FFFFFF"><TABLE class=main_tab id=mainTable width=300 height="96" border=0 bordercolor="#FFFFFF">
                    <TBODY>
                    <TR>
                      <TD height="92">
                        <div>printing fascinating Chinese painting on the PU leather as cover theme, hard cover and round corner;&#13;</div>
                  <div>Inner content:124mm*210mmm, sewing binding, Commonly used information, year plan, notes, address etc.&#13;</div>               </TD></TR></TBODY> <tbody>
                      <tr>
                        <td height="36"><div>
                            <div>customize with your design&#13;</div>
                          <div>inner content can meet your demand </div>
                        </div></td>
                      </tr>
                </tbody></TABLE></TD>
                <TD width="161" align=middle vAlign=top bordercolor="#FFFFFF"><div>
                  <div>
                    <div align="left">Daily plan&#13;</div>
                  </div>
                  <div>
                    <div align="left">2-4languages,2 color printed, &#13;</div>
                  </div>
                  <div>
                    <div align="left">A day per page, &#13;</div>
                  </div>
                  <div>
                    <div align="left">Rearrange for years easily&#13;</div>
                  </div>
                  <div>
                    <div align="left">Half hourly scheduled from 8 am to 8 pm&#13;</div>
                  </div>
                  <div>
                    <div align="left">With year plan, monthly plan, easily arrange and plan your work &amp;l life&#13;</div>
                  </div>
                  <div></div>
                </div></TD>
              </TR></TBODY>
          </table>简单说下代码功能，就是触发型导航菜单，有两个按钮Product Info和Service，右边会有一段没有变化的文字
点击Product Info会出现printing fascinating Chinese painting on the PU leather as cover theme, hard cover and round corner，Inner content:124mm*210mmm, sewing binding, Commonly used information, year plan, notes, address etc
点击Service会出现customize with your design，inner content can meet your demand 
现在的问题是，我在第一次打开网页时，这两个方面的内容都会显示出来，但是刷新一次或者点击某一个按钮后，就会达到我预想的效果，点击各自的按钮会分别显示各自的内容。怎么修改啊？？？大家可以直接复制代码，然后运行下效果。

Answer 1

稍微看下结尾  
居然</TR></TBODY>
          </table>这样的

Answer 2

在你的mainTable里面两个<TBODY>改成<TBODY style="DISPLAY: none">

Answer 3

同意楼上的,是因为页面第一次加载时,你的那两个TBODY默认都是显示的,所以第一次打开页面时两个都会显示,只有当你点击过一个以后,你的程序才会把另一个给出隐藏起来!其实你的程序没错,不过没注意细节的东东罢了!
顺得说一,你也可以在页面加载时,自动调一下你的secBoard(n)方法,这样就可以正常了