显示和隐藏菜单栏(两种方式div、table)
一、table方式
<html>
<head>
<title>菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.borderMenu { border: #CCCCCC; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
-->
</style>
<script language=javascript>
function showmenu(num)
{
if(num.style.display=='none')
{
num.style.display='inline';
}
else
{
num.style.display='none';
}
}
</script>
</head>
<body bgcolor="ebf1fa" text="#000000">
<table width="16%" border="0" cellspacing="0" cellpadding="0" class="borderMenu">
<tr>
<td bgcolor="e7e7e7" class="borderMenu" height="24" style="cursor:hand" οnclick="showmenu(document.all.menu1);">
<div align="center">个人办公</div>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="f7f7f7" id=menu1 name="menu1" style="display:inline">
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">新建发文单</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">部门审核</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">公文会签</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">局办审核</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">局领导签发</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">文件编号</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">公文接收</a></font></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="e7e7e7" class="borderMenu" height="24" style="cursor:hand" οnclick="showmenu(document.all.menu2);">
<div align="center">个人档案</div>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="f7f7f7" id=menu2 name="menu2" style="display:none">
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">名片夹</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">工作日志</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">通讯录</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">电子公告</a></font></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="e7e7e7" class="borderMenu" height="24" style="cursor:hand" οnclick="showmenu(document.all.menu3);">
<div align="center">公文信息</div>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="f7f7f7" id=menu3 name="menu3" style="display:none">
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">公文流程</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">业务信息</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">文件查询</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">发送短消息</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">公共信息</a></font></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="e7e7e7" class="borderMenu" height="24" style="cursor:hand" οnclick="showmenu(document.all.menu4);">
<div align="center">管理工具</div>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="f7f7f7" id=menu4 name="menu4" style="display:none">
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">部门维护</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">用户维护</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">权限管理</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">系统枚举</a></font></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="e7e7e7" class="borderMenu" height="24" style="cursor:hand" οnclick="showmenu(document.all.menu5);">
<div align="center">用户管理</div>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="f7f7f7" name="menu5" id=menu5 style="display:none">
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">用户切换</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">用户权限分配</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">用户权限回收</a></font></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
二、div方式
<html>
<head>
<script language="javascript">
function hideAll() {
for(i=0;i<odiv.length;i++) {
odiv[i].style.display="none";
}
}
function showObj(num)
{
if (odiv[num].style.display=="none")
{
hideAll();
odiv[num].style.display="inline";
}
else {
odiv[num].style.display="none";
}
}
</script>
<style type="text/css">
<!--
.divctrl{
cursor:hand;height:20px;
}
-->
</style>
</head>
<body>
<div onClick="showObj(0)" class="divctrl"><a href="#">div</a></div>
<div id="odiv" style="display:inline">
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
</div>
<div onClick="showObj(1)" class="divctrl"><a href="#">div</a></div>
<div id="odiv" style="display:inline">
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
</div>
<div onClick="showObj(2)" class="divctrl"><a href="#">div</a></div>
<div id="odiv" style="display:inline">
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
</div>
<div onClick="showObj(3)" class="divctrl"><a href="#">div</a></div>
<div id="odiv" style="display:inline">
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
</div>
<div onClick="showObj(4)" class="divctrl"><a href="#">div</a></div>
<div id="odiv" style="display:inline">
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
</div>
</body>
</html>
转载于:https://www.cnblogs.com/hayden/archive/2009/07/21/1527495.html
显示和隐藏菜单栏(两种方式div、table)相关推荐
- html元素隐藏js 控制,JS控制HTML元素的显示和隐藏的两种方法
JS控制HTML元素的显示和隐藏的两种方法 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一 ...
- 微信小程序实现显示pdf格式的两种方式
本文主要介绍小程序中从后台返回显示pdf文件的两种方法 情况一:后台直接给了一个pdf地址 使用wx.downloadFile会发起get请求,下载文件资源到本地,wx.openDocument打开 ...
- jQuery控制元素的显示与隐藏（三种方式对比）
hide和show hide:是$(".类名")或$("#标签名")或$("标签名").hide() show:是$(".类名&q ...
- js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别， 常用的元素的属性操作， 仿电脑系统时间问好 ，表单元素的属性操作 ，案例：仿京东显示隐藏密码 ，样式属性操作
文章目录 操作元素 改变元素内容有两种方式: interText 和 innerHTML的区别 常用的元素的属性操作 案例:仿电脑系统时间问好 表单元素的属性操作 案例:仿京东显示隐藏密码 样式属性操 ...
- 在线直播源码，VUE 获奖名单滚动显示的两种方式
在线直播源码,VUE 获奖名单滚动显示的两种方式 第一种: 使用vue-seamless-scroll组件: 1.安装vue-seamless-scroll npm install vue-seaml ...
- QTreeWidget隐藏节点的两种方式
简述 关于QTreeWidget隐藏节点有两种方式,一种是直接隐藏,一种是间接隐藏,但是两种方式各有差异,下面请听具体解说. 方法一:直接隐藏式 Qt助手里面提供了QTreeWidgetItem::s ...
- Linux中vim编辑文件显示行号（临时和永久两种方式）
一.前言 在Linux中经常使用vim编辑器去修改文件,默认是不显示行号的,那如何显示呢?有临时和永久两种方式. 本文由 @大白有点菜 原创,请勿盗用,转载请说明出处!如果觉得文章还不错, ...
- 多行并一行显示的两种方式(DB2)
2019独角兽企业重金招聘Python工程师标准>>> 一.简介 多行并作一行显示,在此介绍两种方式CTE递归,和XML函数.表数据如下: ID NAME HOUSE 1 张三 普 ...
- cesium两种方式鼠标移入移出实体显示提示框
cesium两种方式鼠标移入移出实体显示提示框 第一种方式 采用cesium的label作为提示框 var labelEntity = viewer.entities.add({label : {sh ...
最新文章
- 计算体系结构的演进规律
- python绘制三维散点图-Python散点图与三维图
- 永洪科技携手华为构建金融智慧运营与商业智能方案，解决金融敏捷分析难题
- INotifyPropertyChanged 接口
- 用分布式缓存提升ASP.NET Core性能
- ROS配置分布式通信
- Xcode7 Xcode6 中添加pch文件
- LocalBroadcastManager分析
- 【Alpha版本】项目测试
- 矢量网络分析仪（Vector Network Analyzer）
- 【前端知识之JS】JS的作用域链
- 嵌入式开发工具链概述
- USB 协议整理 九：USB 协议调试工程说明
- .c文件和.h文件之间的联系
- C++学习系列之求圆柱体的体积
- c语言ascii码字符集共有多少个编码,标准ascii码字符集共有多少个编码
- 判断点在多边形内外的简单算法
- python apply lambda if_在Pandas中使用Apply Lambda函数和多个if语句
- 最新超漂亮UI仿芒果TV听书网站模板双端+苹果CMS内核
- 用paddleocr识别汉字_使用飞桨一步步实现多语言OCR文字识别软件