代码改变世界

HTML+CSS模拟的Tab控件

2009-10-04 15:34  floweriness  阅读(439)  评论(0)  编辑  收藏  举报
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>网页特效代码|JsCode.CN|---经典实用的触发型导航菜单</title>

    </head>

    <body>

        <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>
        <!--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 border="1" align="center" cellpadding="0"
            cellspacing="0" bordercolor="#FFFFFF" bgcolor="#9999CC">
            <TBODY>
                <TR align=center height=20>
                    <TD class=sec2 onclick=secBoard(0) width="10%">
                        关于TBODY标记
                    </TD>
                    <TD class=sec1 onclick=secBoard(1) width="10%">
                        关于cells集合
                    </TD>
                    <TD class=sec1 onclick=secBoard(2) width="10%">
                        关于tBodies集合
                    </TD>
                    <TD class=sec1 onclick=secBoard(3) width="10%">
                        关于display属性
                    </TD>
                </TR>
            </TBODY>