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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用js实现的比较经典实用的触发型导航菜单

Javascript: document.createElement()用法及注意事项; Javascript教程：关于内存泄漏问题; 延迟事件为0的setTimeout的真正目的; JavaScript图片特效代码下载; AJAX初学:IE缓存页面的问题; AJAX中DOM的操作方法; AJAX中文乱码的两类问题; javascript程序的执行效率问题; 网页用户注册界面的设计; ajax应该如何应用？; 详解Javascript匿名函数的使用; Ajax：研究密码强度规则(仿google); JavaScript学习教程; 网页制作中常用的Javascript代码; 深入学习Javascript函数; JS的Object类的属性和方法; Javascript初学者实例教程(1):简单交互; Javascript初学者实例教程(2):event对象和事件; Javascript初学者实例教程(3):数组和slice()方法; Javascript初学者实例教程(4):对象和构造方法

No. « ‹ 163 164 165 166 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 277 ::

收藏到网摘: n/a

Js+DVML很酷漂亮实用的右键弹出菜单 js中slice()方法的使用说明

点击运行可以看到效果:

<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+DVML很酷漂亮实用的右键弹出菜单 js中slice()方法的使用说明

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

评论 (0) All

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