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 相关文章推荐
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
详解Vue的sync修饰符
May 15 Vue.js
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/05/29 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
python实现一个简单的并查集的示例代码
2018/03/19 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
成教自我鉴定
2013/10/27 职场文书
期末总结的个人自我评价
2013/11/02 职场文书
文秘专业应届生求职信范文
2013/11/14 职场文书
四年大学生活的个人自我评价
2013/12/11 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
施工协议书范本
2014/04/22 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
大雁塔英文导游词
2015/02/10 职场文书
大学生求职自荐信
2015/03/24 职场文书
乡镇团代会开幕词
2016/03/04 职场文书