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 相关文章推荐
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
vue中的scope使用详解
Oct 29 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
php实现的ping端口函数实例
2014/11/12 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
javascript 写类方式之九
2009/07/05 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
vue实现分页组件
2020/06/16 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
使用python实现个性化词云的方法
2017/06/16 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
python绘图模块之利用turtle画图
2021/02/12 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
函授自我鉴定范文
2014/02/06 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
美术教师岗位职责
2014/03/18 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
收银员岗位职责范本
2015/04/07 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书