触发型导航菜单

于 2007-11-15 23:51:00 发布
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML 文章标签： table border javascript class html function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yehell/article/details/1887627

 code:

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>触发型导航菜单</title>
<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>
</head>

<body>
<!--HTML部分-->
            <TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0>
                 <TBODY>
                     <TR align=middle 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>
            </TABLE>

            <TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0>
            <!--关于TBODY标记-->
                 <TBODY style="DISPLAY: block">
                     <TR>
                         <TD vAlign=top align=middle><BR><BR>
                              <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                                  <TBODY>
                                       <TR>
                                           <TD>指定行做为表体。<BR>注释：TBODY要素是块要素，并且需要结束标签。<BR>如果表格没有显式定义TBODY要素，该要素也提供给所有表。<BR><BR><BR><BR>
                                           </TD>
                                       </TR>
                                  </TBODY>
                              </TABLE>
                        </TD>
                    </TR>
               </TBODY><!--关于cells集合-->
              <TBODY style="DISPLAY: none">
                 <TR>
                    <TD vAlign=top align=middle><BR><BR>
                        <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                            <TBODY>
                                <TR>
                                    <TD>检索表行或者整个表中所有单元格的集合。<BR>应用于TR、TABLE。<BR><BR><BR><BR>
                                     </TD>
                                 </TR>
                             </TBODY>
                          </TABLE>
                      </TD>
                  </TR>
              </TBODY><!--关于tBodies集合-->
              <TBODY style="DISPLAY: none">
                 <TR>
                    <TD vAlign=top align=middle><BR><BR>
                       <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                          <TBODY>
                             <TR>
                                 <TD>检索表中所有TBODY对象的集合。对象在该集合中按照HTML源顺序排列。<BR>应用于TABLE。<BR><BR><BR><BR>
                                 </TD>
                             </TR>
                         </TBODY>
                      </TABLE>
                   </TD>
                </TR>
             </TBODY><!--关于display属性-->
              <TBODY style="DISPLAY: none">
                 <TR>
                    <TD vAlign=top align=middle><BR><BR>
                       <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                          <TBODY>
                             <TR>
                                <TD>设置或者检索对象是否被提供。<BR>可能的值为block、none、inline、list-item、table-header-group、table-footer-group。<BR>该特性可读写，块要素默认值为block，内联要素默认值为inline；层叠样式表（CSS）属性不可继承。<BR><BR><BR><BR>
<A href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp? frame=true" target=_blank>点击此处</A>可参阅微软<A href="http://msdn.microsoft.com/" target=_blank>MSDN在线</A>上的解释。 
                                  </TD>
                               </TR>
                            </TBODY>
                         </TABLE>
                    </TD>
               </TR>
           </TBODY>
     </TABLE>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值