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验证表单第二部分
Nov 25 Javascript
用一段js程序来实现动画功能
Mar 06 Javascript
JavaScript中的prototype使用说明
Apr 13 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
vue组件命名和props命名代码详解
Sep 01 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
Vue实现导航栏菜单
Aug 19 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方法调用模式与函数调用模式简例
2011/09/20 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
Jquery中获取iframe的代码
2011/01/11 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
中文师范生自荐信
2014/01/30 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
质检员岗位职责范本
2015/04/07 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
教师远程研修感悟
2015/11/18 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server