用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 1pxsolid; 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=topalign=middle> <TABLE cellSpacing=0cellPadding=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=topalign=middle> <TABLE cellSpacing=0cellPadding=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=topalign=middle> <TABLE cellSpacing=0cellPadding=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著北京华中兴业科技发展有限公司译） 点击此处 可参阅微软MSDN在线上的解释。 </TD></TR></TBODY></TABLE> ;</TD></TR></TBODY></TABLE&g t;</body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]