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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 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
基于文本的访客签到簿
2006/10/09 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
js模拟微博发布消息
2017/02/23 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
python实现定时同步本机与北京时间的方法
2015/03/24 Python
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
Python卸载模块的方法汇总
2016/06/07 Python
使用Python对Access读写操作
2017/03/30 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
Python中collections模块的基本使用教程
2018/12/07 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
Keras设置以及获取权重的实现
2020/06/19 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
《散步》教学反思
2014/03/02 职场文书
中职生自荐信范文
2014/06/15 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js