用js实现的比较经典实用的触发型导航菜单

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

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

频道导航

用js实现的比较经典实用的触发型导航菜单

您可能感兴趣的文章: