一个简单的收缩菜单效果- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一个简单的收缩菜单效果

Javascript: JQuery Tips(3) 关于$()包装集内元素的改变; JavaScript 创建随机数和随机图片; javascript document.execCommand() 常用解析; firefox下对ajax的onreadystatechange的支持情况分析; Javascript attachEvent传递参数的办法; jQuery Attributes(属性)的使用(一、属性篇); jquery自动完成插件(autocomplete)应用之PHP版; 查询绑定数据岛的表格中的文本并修改显示方式的js代码; 讨论javascript(一)工厂方式 js面象对象的定义方法; IE不支持option的display样式，只能使用remove和add; 多浏览器兼容的获取元素和鼠标的位置的js代码; js checkbox全选并将获取值放到input里边; javascript 日期联动选择器 [其中的一些代码值得学习]; javascript实现的仿51job地址多项选择方式效果; jQuery 渐变下拉菜单; 利用图片的 onerror 事件载入默认图片; js实现页面打印功能实例代码(附去页眉页脚功能代码); JQuery读取XML文件数据并显示的实现代码; 比较详细的关于javascript 解析json的代码; TextArea 控件的最大长度问题(js json)

No. « ‹ 249 250 251 252 › »

技术文章搜索

关键字

Javascript 中的一个简单的收缩菜单效果

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

收藏到网摘: n/a

用javascript实现“闪动”标题栏 HTML-CSS群中单选引发的“事件”

点击运行可以看到效果:

<table width="174"> <tr> <td bgcolor="#99CCFF"><a href="javascript:showmenu(lay0)" >网页设计</a></td> </tr> <tr id='lay0' style="display:none;"> <td><table width="100%" border="0" cellspacing="0"> <tr> <td width="12%"> </td> <td width="88%"><a href="Teach_Dr.asp?owen1=网面设计 owen2=基础知识" target="_blank">基础知识</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=网面设计 owen2=HTML和CSS" target="_blank">HTML和CSS</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=网面设计 owen2=Dreamweaver" target="_blank">Dreamweaver</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=网面设计 owen2=FrontPage" target="_blank">FrontPage</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=网面设计 owen2=Xhtml" target="_blank">Xhtml</a></td> </tr> </table></td> </tr> <tr> <td bgcolor="#99CCFF"><a href="javascript:showmenu(lay1)" >FLASH</a></td> </tr> <tr id='lay1' style="display:none;"> <td><table width="100%" border="0" cellspacing="0"> <tr> <td width="11%"> </td> <td width="89%"><a href="Teach_Dr.asp?owen1=Flash owen2=基础知识" target="_blank">基础知识</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=Flash owen2=初级操作">初级操作</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=Flash owen2=实例教学" target="_blank">实例教学</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=Flash owen2=Action应用" target="_blank">Action应用</a></td> </tr> </table></td> </tr> <tr> <td bgcolor="#99CCFF"><a href="javascript:showmenu(lay2)" >平面设计</a></td> </tr> <tr id='lay2' style="display:none;"> <td><table width="100%" border="0" cellspacing="0"> <tr> <td width="13%"> </td> <td width="87%"><a href="Teach_Dr.asp?owen1=平面设计 owen2=基础知识" target="_blank">基础知识</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=平面设计 owen2=Photoshop">Photoshop</a></td> </tr> <tr> <td> </td> <td><a href="http://www.ruanchen.com/" style="color: #000">Fireworks</a>"><a href="http://www.ruanchen.com/" style="color: #000">Fireworks</a></a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=平面设计 owen2=滤镜专辑" target="_blank">滤镜专辑</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=平面设计 owen2=CorelDraw" target="_blank">CorelDraw</a></td> </tr> </table></td> </tr> <tr> <td bgcolor="#99CCFF"><a href="javascript:showmenu(lay3)" >编程开发</a></td> </tr> <tr id='lay3' style="display:none;"> <td><table width="100%" border="0" cellspacing="0"> <tr> <td width="13%"> </td> <td><a href="Teach_Dr.asp?owen1=编程开发 owen2=Asp" target="_blank">Asp</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=编程开发 owen2=ASP.NET" target="_blank">ASP.NET</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=编程开发 owen2=基础知识" target="_blank">JSP</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=编程开发 owen2=基础知识" target="_blank">PHP</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=编程开发 owen2=基础知识" target="_blank">数据库</a></td> </tr> </table></td> </tr> <tr> <td bgcolor="#99CCFF"><a href="javascript:showmenu(lay4)" >网页特效</a></td> </tr> <tr id='lay4' style="display:none;"> <td><table width="100%" border="0" cellspacing="0"> <tr> <td width="13%"> </td> <td><a href="Teach_Dr.asp?owen1=网页特效 owen2=窗体特效" target="_blank">窗体特效</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=网页特效 owen2=菜单特效" target="_blank">菜单特效</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=网页特效 owen2=文本特效" target="_blank">文本特效</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=网页特效 owen2=鼠标特效" target="_blank">鼠标特效</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=网页特效 owen2=图像媒体" target="_blank">图像媒体</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=网页特效 owen2=时间日期" target="_blank">时间日期</a></td> </tr> <tr> <td> </td> <td><a href="Teach_Dr.asp?owen1=网页特效 owen2=其它综合" target="_blank">其它综合</a></td> </tr> </table></td> </tr>
</table>
<script language=JavaScript>
function showmenu(strID){ var i; for(i=0;i<=4;i++){ var lay; lay = eval('lay' + i); if (lay.style.display=="block" && lay!=eval(strID)){ lay.style.display = "none"; } } if (strID.style.display=="none"){ strID.style.display = "block"; }else{ strID.style.display = "none"; }
}
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

用javascript实现“闪动”标题栏 HTML-CSS群中单选引发的“事件”

Javascript 中的 一个简单的收缩菜单效果

评论 (0) All

Javascript 中的一个简单的收缩菜单效果