js实例教程一：用js实现竖的隐藏菜单
来源：互联网 发布：淘宝亏钱 编辑：程序博客网 时间：2024/06/06 17:45
主要代码：
<SCRIPT language="javascript">function showsubmenu(sid){var ele;//先关闭其他的for(var i=1;i<10;i++){ele = document.getElementById("submenu" + i);if(ele!=null && i!=sid){ele.style.display="none";}}//显示点击的菜单whichEl = document.getElementById("submenu" + sid);if (whichEl.style.display == "none"){whichEl.style.display="";}else{whichEl.style.display="none";}}</SCRIPT> 实现思路：通过获取竖立表格的各行元素，用ele.style.display="none";和whichEl.style.display="";分别控制达到隐藏和显示的作用。完整示例：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="../css/css.css" rel="stylesheet" type="text/css"><title></title><style type=text/css>SCROLLBAR-FACE-COLOR: #9999CC;SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #39867B; SCROLLBAR-3DLIGHT-COLOR: #39867B; SCROLLBAR-ARROW-COLOR: #330000; SCROLLBAR-TRACK-COLOR: #E1E1FF; SCROLLBAR-DARKSHADOW-COLOR: #ffffff;}table { border:0px; }td { font:normal 12px 宋体; }img { vertical-align:bottom; border:0px; }a { font:normal 12px 宋体; color:#000000; text-decoration:none; }a:hover { color:#cc0000;text-decoration:underline; }.sec_menu { border-left:1px solid white; border-right:1px solid white; border-bottom:1px solid white; overflow:hidden; background:#FFFFCC; }.menu_title { }.menu_title span { position:relative; top:2px; left:8px; color:#39867B; font-weight:bold; }.menu_title2 { }.menu_title2 span { position:relative; top:2px; left:8px; color:#cc0000; font-weight:bold; }</style><SCRIPT language="javascript">function showsubmenu(sid){var ele;//先关闭其他的for(var i=1;i<10;i++){ele = document.getElementById("submenu" + i);if(ele!=null && i!=sid){ele.style.display="none";}}//显示点击的菜单whichEl = document.getElementById("submenu" + sid);if (whichEl.style.display == "none"){whichEl.style.display="";}else{whichEl.style.display="none";}}</SCRIPT><BODY leftmargin="0" topmargin="0" marginheight="0" marginwidth="0"><table width=100% cellpadding=0 cellspacing=0 border=0 align=left><tr><td valign=top><table width="177" border="0" align=center cellpadding=0 cellspacing=0 bgcolor="#7EAAEB"><tr><td width="177" height=30 valign=bottom> </td> </tr></table> <table width="177" height="0" align=center cellpadding=0 cellspacing=0 bgcolor="#D9E8FE"> <tr> <td height="25" class="menu_title" id="menuTitle1" style="cursor:hand;" onclick="showsubmenu(1)" onmouseover="this.className='menu_title2';" onmouseout="this.className='menu_title';"> <span>项目类别管理</span></td> </tr> <tr> <td height="0" id="submenu1" style="display:none"> <div class="sec_menu" style="width:177"> <table cellpadding=0 cellspacing=0 align=center width=131> <tr> <td width="165" height=20><a href="/ProjectManager/projectCat?submitFlag=toTreeMain" target="mainFrame">项目类别维护</a></td> </tr><tr> <td width="165" height=20><a href="/ProjectManager/projectPlan?submitFlag=toTreeMain" target="mainFrame">类别计划维护</a></td> </tr> </table> </div> <div style="width:177"> <table cellpadding=0 cellspacing=0 align=center> <tr> <td height=10></td> </tr> </table> </div> </td> </tr> </table><table width="177" height="0" align=center cellpadding=0 cellspacing=0 bgcolor="#D9E8FE"> <tr> <td height="25" class="menu_title" id="menuTitle1" style="cursor:hand;" onclick="showsubmenu(2)" onmouseover="this.className='menu_title2';" onmouseout="this.className='menu_title';"> <span>项目计划管理</span></td> </tr> <tr> <td height="0" id="submenu2" style="display:none"> <div class="sec_menu" style="width:177"> <table cellpadding=0 cellspacing=0 align=center width=131> <tr> <td width="165" height=20><a href="/ProjectManager/projectplan/add.jsp" target="mainFrame">项目计划新增</a></td> </tr> <tr> <td width="165" height=20> <a href="/ProjectManager/projectPlan?submitFlag=query&state=1" target="mainFrame">草拟计划列表</a></td> </tr> </table> </div> <div style="width:177"> <table cellpadding=0 cellspacing=0 align=center> <tr> <td height=10></td> </tr> </table> </div> </td> </tr> </table><table width="177" height="0" align=center cellpadding=0 cellspacing=0 bgcolor="#D9E8FE"> <tr> <td height="25" class="menu_title" id="menuTitle1" style="cursor:hand;" onclick="showsubmenu(3)" onmouseover="this.className='menu_title2';" onmouseout="this.className='menu_title';"> <span>项目审核管理</span></td> </tr> <tr> <td height="0" id="submenu3" style="display:none"> <div class="sec_menu" style="width:177"> <table cellpadding=0 cellspacing=0 align=center width=131> <tr> <td width="65" height=20><a href="default.html" target="mainFrame">待审核列表</a></td> </tr> <tr> <td width="65" height=20> <a href="default.html" target="mainFrame">已审核列表</a></td> </tr> </table> </div> <div style="width:177"> <table cellpadding=0 cellspacing=0 align=center> <tr> <td height=10></td> </tr> </table> </div> </td> </tr> </table><table width="177" height="0" align=center cellpadding=0 cellspacing=0 bgcolor="#D9E8FE"> <tr> <td height="25" class="menu_title" id="menuTitle1" style="cursor:hand;" onclick="showsubmenu(4)" onmouseover="this.className='menu_title2';" onmouseout="this.className='menu_title';"> <span>工作列表管理</span></td> </tr> <tr> <td height="0" id="submenu4" style="display:none"> <div class="sec_menu" style="width:177"> <table cellpadding=0 cellspacing=0 align=center width=131> <tr> <td width="165" height=20><a href="/ProjectManager/workList?submitFlag=toWaitAuditList" target="mainFrame">待审核的工作列表</a></td> </tr> <tr> <td width="165" height=20><a href="/ProjectManager/workList?submitFlag=toWaitUpdateList" target="mainFrame">待修改的工作列表</a></td> </tr> <tr> <td width="165" height=20><a href="/ProjectManager/workList?submitFlag=toWaitViewList" target="mainFrame">待查看的工作列表</a></td> </tr> <tr> <td width="165" height=20> <a href="default.html" target="mainFrame">已完成工作列表</a></td> </tr> </table> </div> <div style="width:177"> <table cellpadding=0 cellspacing=0 align=center> <tr> <td height=10></td> </tr> </table> </div> </td> </tr> </table></body></html>效果：
0 0
- js实例教程一：用js实现竖的隐藏菜单
- js实现简单的隐藏导航菜单动态显示
- js隐藏导航菜单
- 用js实现菜单的联动选择
- 用js实现的级联菜单
- JS+CSS实现的菜单
- js下拉菜单的实现
- js菜单自适应的实现
- JS隐藏显示左侧菜单
- JS如何实现点击页面其他地方隐藏菜单？
- 用js实现苹果菜单
- js实现弹出式菜单
- JS实现菜单样式
- JS实现菜单收缩
- JS实现树形菜单
- JS 实现折叠式菜单
- js实现下拉菜单
- js实现右键菜单
- JSP与Servlet之间传值GOOD
- 【深入浅出ios开发】UIActionSheet
- Qt中漂亮的几款QSS
- ISO 8583协议-银行交易的标准
- 【深入浅出IOS开发】Xcode6如何设置storyboard中Controller的开始箭头
- js实例教程一：用js实现竖的隐藏菜单
- K - 迷宫问题
- Android消息驱动机制Handler+Looper+Thread+MessageQueue
- linux grep命令
- Find The Multiple
- php使用session来保存用户登录信息
- Layouts
- 第四周 课后实践--程序阅读
- mysql数据库 ibatis环境下column "username" not found问题
