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

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

Javascript: 拖动一个HTML元素; JavaScript使用prototype定义对象类型(转)[; 枚举JavaScript对象的函数; 在Javascript中定义对象类别; 获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft （For:IE5＋ FF1 ）[; 用JavaScript限制textarea输入长度 (For: IE、Firefox ...)[; 检测邮箱地址是否合法 Check Mail Address (For: IE5+、FF1.06、Opera 7+ ...)[; 用于自动添加Digg This!按钮的JavaScript; Javascript实例教程(19) 使用HoTMetal(1); Javascript实例教程(19) 使用HoTMetal(2); Javascript实例教程(19) 使用HoTMetal(3); Javascript实例教程(19) 使用HoTMetal(4); Javascript实例教程(19) 使用HoTMetal(5); Javascript实例教程(19) 使用HoTMetal(6); Javascript实例教程(19) 使用HoTMetal(7); 实现复选框全选/全不选切换; js不是基础的基础; IE的不合理设计和Bugs; js倒计时代码; js静态作用域的功能。

No. « ‹ 37 38 39 40 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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 中的一个简单的收缩菜单效果