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

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

Javascript: [原创]js 日期加红代码适用于各种cms; [原创]javascript 改变字体大小方法集合; jsTree树控件(基于jQuery, 超强悍)[推荐]; 修改jQuery.Autocomplete插件支持中文输入法避免TAB、ENTER键失效、导致表单提交; jQuery live( type, fn ) 委派事件实现; javascript createElement()创建input不能设置name属性的解决方法; Jquery 表单取值赋值的一些基本操作; jquery select选中的一个小问题; 网页里控制图片大小的相关代码; 网页常用特效代码整理; 网站上面有这种切换效果; tagName的使用，留一笔; 图片按比例缩放函数; 非常好的js代码; 精彩图片推荐渐隐渐现; 左右图片循环滚动停顿一下后继续; popdiv; 奇妙的Javascript图片放大镜; 怎么用javascript进行拖拽; 一个表格收缩展开的函数

No. « ‹ 190 191 192 193 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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实现的比较经典实用的触发型导航菜单