无刷新TAB

<html>
<hend>
<style type=text/css>
.sec1 {BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #eeeeee;}
.sec2 {BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BACKGROUND-COLOR: #d4d0c8;}
.main_tab {BORDER-RIGHT: gray 1px solid; BORDER-LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8;}
</style>
</hend>
<body>
<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 id=secTable cellSpacing=0 cellPadding=0 width=549 border=0>
  <TBODY>
    <TR align=center height=20>
      <TD class=sec2 onMouseOver=secBoard(0) width="10%">菜单一</TD>
        <TD class=sec1 onMouseOver=secBoard(1) width="10%">菜单二</TD>
        <TD class=sec1 onMouseOver=secBoard(2) width="10%">菜单三</TD>
        <TD class=sec1 onMouseOver=secBoard(3) width="10%">菜单四</TD>
    </TR>
  </TBODY>
</TABLE>

<TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0>
  <!--菜单一内容-->
  <TBODY style="DISPLAY: block">
    <TR>
      <TD vAlign=top align=center>
        <TABLE cellSpacing=0 cellPadding=40 width=490 border=0>
          <TBODY>
            <TR>
              <TD><a href="http://www.butong.net/background/index.htm" target="_blank">网页特效库 - 背景按钮特效</a></TD>
            </TR>
          </TBODY>
        </TABLE>
      </TD>
    </TR>
  </TBODY>

  <!--菜单二内容-->
  <TBODY style="DISPLAY: none">
    <TR>
      <TD vAlign=top align=center>
        <TABLE cellSpacing=0 cellPadding=40 width=490 border=0>
          <TBODY>
            <TR>
              <TD><a href="http://www.butong.net/navigation/index.htm" target="_blank">网页特效库 - 导航菜单特效</a></TD>
            </TR>
          </TBODY>
        </TABLE>
      </TD>
    </TR>
  </TBODY>

  <!--菜单三内容-->
  <TBODY style="DISPLAY: none">
    <TR>
      <TD vAlign=top align=center>
        <TABLE cellSpacing=0 cellPadding=40 width=490 border=0>
          <TBODY>
            <TR>
              <TD><a href="http://www.butong.net/img/index.htm" target="_blank">网页特效库 - 网页图片特效</a></TD>
            </TR>
          </TBODY>
        </TABLE>
      </TD>
    </TR>
  </TBODY>

  <!--菜单四内容-->
  <TBODY style="DISPLAY: none">
    <TR>
      <TD vAlign=top align=center>
        <TABLE cellSpacing=0 cellPadding=40 width=490 border=0>
          <TBODY>
            <TR>
              <TD><a href="http://www.butong.net/other/index.htm" target="_blank">网页特效库 - 另类网页特效</a></TD>
            </TR>
          </TBODY>
        </TABLE>
      </TD>
    </TR>
  </TBODY>
</TABLE>
</body>
</html>

posted @ 2008-09-03 16:22  hongzk  阅读(401)  评论(1编辑  收藏  举报