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实现图片裁剪思路及实现
Aug 16 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 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
介绍几个array库的新函数 php
2006/12/29 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
jQuery each()方法的使用方法
2010/03/18 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
Python正则表达式分组概念与用法详解
2017/06/24 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
类的返射机制中的包及核心类
2016/09/12 面试题
平面设计师工作职责范文
2013/12/03 职场文书
医药代表个人的求职信分享
2013/12/08 职场文书
黄河的主人教学反思
2014/02/07 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
医院节能减排方案
2014/06/13 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
秋冬农业生产标语
2014/10/09 职场文书
承诺函范文
2015/01/21 职场文书
捐资助学感谢信
2015/01/21 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
音乐研修感悟
2015/11/18 职场文书