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 相关文章推荐
基于json的jquery地区联动效果代码
Jul 06 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
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培训要多少钱
2017/06/06 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python各类经纬度转换的实例代码
2019/08/08 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
Python reduce函数作用及实例解析
2020/05/08 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
结构工程个人自荐信范文
2013/11/30 职场文书
岗位聘任书范文
2014/03/29 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
2015年读书月活动总结
2015/03/26 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS