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事件模型代码
Jul 01 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 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 print EOF实现方法
2009/05/21 PHP
UCenter Home二次开发指南
2009/05/28 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
php实现简单四则运算器
2020/11/29 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
jquery操作select大全
2014/04/25 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
js 毫秒转天时分秒的实例
2017/11/17 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
python中requests模块的使用方法
2015/04/08 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
工业自动化毕业生自荐信范文
2014/01/04 职场文书
2014年母亲节寄语
2014/05/07 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书