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

技术文章搜索

关键字

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

---

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-10   浏览: 286 ::
收藏到网摘: 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群中单选引发的“事件”

评论 (0) All

登陆 还没注册？

设为首页 | 加入收藏 | 关于我们 | 联系我们 | 广告服务 | 网站地图 | 友情链接 | 在线帮助 | 免责声明 Sitemap W3school

如果您觉得本站不错，别忘了告诉您的同学和同事哟 ^_^

欢迎各网站转载我们的原创，转载时请注明出处。

All copyright is reserved by 软晨网（RuanChen.com）