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 event flow 的一个bug详解
Sep 17 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 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
ftp类(myftp.php)
2006/10/09 PHP
基于文本的留言簿
2006/10/09 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
AngularJs concepts详解及示例代码
2016/09/01 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
python在每个字符后添加空格的实例
2018/05/07 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
研发工程师的岗位职责
2013/11/18 职场文书
《秋游》教学反思
2014/04/24 职场文书
环保建议书600字
2014/05/14 职场文书
法律系毕业生求职信
2014/05/28 职场文书
裁员通知
2015/04/25 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
趣味运动会赞词
2015/07/22 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android