经典实用的触发型导航菜单

我不是鱼

UID: 2
帖子: 1402
积分: 3221
在线时间: 2077小时
注册时间: 2006-05-16
最后登录: 2019-01-15

1^# 我不是鱼发表于2006-09-03

经典实用的触发型导航菜单

提示：您可以先修改部分代码再运行

<html> 
 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>php爱好者</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> 
 
            <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=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 style="DISPLAY: block"> 
              <TR> 
                <TD vAlign=top align=middle> 
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> 
                    <TBODY> 
                    <TR> 
                      <TD>指定行做为表体。 
 
 注释：TBODY要素是块要素，并且需要结束标 
 
签。 　　　即使如果表格没有显式定义TBODY 
 
要素，该要素也提供给所有表。 
 
参考：《动态HTML参考和开发应用大全》（人民邮电出 
 
版社 
                        Microsoft Corporation著 
                    北京华中兴业科技发展有限公司 
 
译） 
 
 </TD></TR></TB 
 
ODY></TABLE></TD></TR></T 
 
BODY> 
              <TBODY style="DISPLAY: 
 
none"> 
              <TR> 
                <TD vAlign=top 
 
align=middle> 
                  <TABLE cellSpacing=0 
 
cellPadding=0 width=490 border=0> 
                    <TBODY> 
                    <TR> 
                      <TD>检索表行或者整个 
 
表中所有单元格的集合。 应用于TR、TABLE。 
 
 参考：《动态HTML参考和开发应 
 
用大全》（人民邮电出版社 
                        Microsoft Corporation著 
                    北京华中兴业科技发展有限公司 
 
译） 
 
 </TD></TR></TB 
 
ODY></TABLE></TD></TR></T 
 
BODY> 
              <TBODY style="DISPLAY: 
 
none"> 
              <TR> 
                <TD vAlign=top 
 
align=middle> 
                  <TABLE cellSpacing=0 
 
cellPadding=0 width=490 border=0> 
                    <TBODY> 
                    <TR> 
                      <TD>检索表中所有TBODY 
 
对象的集合。对象在该集合中按照HTML源顺序排列。 
 
 应用于TABLE。 参考： 
 
《动态HTML参考和开发应用大全》（人民邮电出版社 
                        Microsoft Corporation著 
                    北京华中兴业科技发展有限公司 
 
译） 
 
 </TD></TR></TB 
 
ODY></TABLE></TD></TR></T 
 
BODY> 
              <TBODY style="DISPLAY: 
 
none"> 
              <TR> 
                <TD vAlign=top 
 
align=middle> 
                  <TABLE cellSpacing=0 
 
cellPadding=0 width=490 border=0> 
                    <TBODY> 
                    <TR> 
                      <TD>设置或者检索对象 
 
是否被提供。 可能的值为block、none、 
 
inline、list-item、table-header-group、table- 
 
footer-group。 该特性可读写，块要素默认 
 
值为block，内联要素默认值为inline；层叠样式表 
 
（CSS）属性不可继承。 参考：《 
 
动态HTML参考和开发应用大全》（人民邮电出版社 
                        Microsoft Corporation著 
 
北京华中兴业科技发展有限公司译） 
 
 <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&g 
 
t;</body> 
 
</html>

提示：您可以先修改部分代码再运行

如履薄冰