js实现的折叠导航示例


Posted in Javascript onNovember 29, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<meta http-equiv=content-type content="text/html; charset=utf-8" /> 
<link href="css/admin.css" type="text/css" rel="stylesheet" /> 
<script language=javascript> 
function expand(el)//传递的是id,1,2,3用来区分所属的分类 
{ 
childobj = document.getElementById("child" + el);//child1,child2..... 
if (childobj.style.display == 'none')//如果此元素师none,就不会被显示 
{ 
childobj.style.display = 'block';//如果是block。就会显示为块级元素 
} 
else 
{ 
childobj.style.display = 'none';//当再次点击时,那么就会又隐藏起来 
} 
return; 
} 
</script> 
</head> 
<body> 
<table height="100%" cellspacing=0 cellpadding=0 width=170 
background=./img/menu_bg.jpg border=0> 
<tr> 
<td valign=top align=middle> 
<table cellspacing=0 cellpadding=0 width="100%" border=0> 
<tr> 
<td height=10></td> 
</tr> 
</table> 
<table cellspacing=0 cellpadding=0 width=150 border=0> 
<tr height=22> 
<td style="padding-left: 30px" background=./img/menu_bt.jpg> 
<a class=menuparent onclick=expand(1) href="javascript:void(0);">人员管理</a></td></tr> 
<tr height=4> 
<td></td></tr></table> 
<table id=child1 style="display: none" cellspacing=0 cellpadding=0 
width=150 border=0> 
<tr height=20> 
<td align=middle width=30><img height=9 
src="./img/menu_icon.gif" width=9></td> 
<td><a class=menuchild 
href="memberadd.jsp" 
target=right>人员增加</a></td></tr> 
<tr height=20> 
<td align=middle width=30><img height=9 
src="./img/menu_icon.gif" width=9></td> 
<td><a class=menuchild 
href="#" 
target=right>人员修改</a></td></tr> 
<tr height=20> 
<td align=middle width=30><img height=9 
src="./img/menu_icon.gif" width=9></td> 
<td><a class=menuchild 
href="#" 
target=right>人员删除</a></td></tr> 
<tr height=20> 
<td align=middle width=30><img height=9 
src="./img/menu_icon.gif" width=9></td> 
<td><a class=menuchild 
href="#" 
target=right>人员查找</a></td></tr> 
<tr height=4> 
<td colspan=2></td> 
</tr> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 Javascript
Moment的feature导致线上bug解决分析
Sep 23 Javascript
javascript特殊用法示例介绍
Nov 29 #Javascript
jquery和ajax的关系详细介绍
Nov 29 #Javascript
js操作table示例(个人心得)
Nov 29 #Javascript
css配合jquery美化 select
Nov 29 #Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 #Javascript
JS实现多物体缓冲运动实例代码
Nov 29 #Javascript
JS实现匀速运动的代码实例
Nov 29 #Javascript
You might like
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
PHP常用的小程序代码段
2015/11/14 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
python实现马耳可夫链算法实例分析
2015/05/20 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
python从PDF中提取数据的示例
2020/10/30 Python
JSP&Servlet技术面试题
2015/05/21 面试题
教师自我反思材料
2014/02/14 职场文书
手工社团活动方案
2014/02/17 职场文书
企业环保标语
2014/06/10 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
债务纠纷代理词
2015/05/25 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers