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自定义图片热区效果
Jul 21 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 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 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
php中strtotime函数用法详解
2014/11/15 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
go语言计算两个时间的时间差方法
2015/03/13 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
Python双链表原理与实现方法详解
2020/02/22 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
政法大学毕业生自荐信范文
2014/01/01 职场文书
24岁生日感言
2014/01/13 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
2014年消防工作总结
2014/11/21 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
Hive HQL支持2种查询语句风格
2022/06/25 数据库