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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
Javascript 函数中的参数使用分析
Mar 27 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 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
PHP文件缓存类实现代码
2015/10/26 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
详解Vue打包优化之code spliting
2018/04/09 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
Python中的装饰器用法详解
2015/01/14 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
对python中dict和json的区别详解
2018/12/18 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
python搜索包的路径的实现方法
2019/07/19 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
Python使用configparser库读取配置文件
2020/02/22 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
开朗女孩的自我评价
2014/02/10 职场文书
房屋转让协议书
2014/10/18 职场文书
工地食品安全责任书
2015/05/09 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL