显示和隐藏菜单栏(两种方式div、table)
2010-03-30 11:01
357 查看
一、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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 显示和隐藏菜单栏(两种方式div、table)
- 两种div隐藏和显示方式的区别visibility和display
- 两种方式实现Activity中状态栏，导航栏的隐藏与显示
- 隐藏和显示div的两种方法（display和visibility）
- 显示/隐藏侧边菜单栏div
- 转载：div或table内容超出宽度时隐藏并显示省略标记
- Table在DIV中以滚动条方式显示
- DIV与Table两种页面布局方式的优缺点
- div隐藏的两种方式
- div 隐藏和显示方式
- div或table内容超出宽度时隐藏并显示省略标记
- gvim 菜单栏与工具栏隐藏与显示动态切换
- table的td内容超出隐藏并显示省略号
- div的显示与隐藏
- jquery-控制div的显示与隐藏
- web前端,js实现div隐藏显示
- [HTML]显示/隐藏DIV的技巧(visibility与display的差别)
- jquery点击按钮显示和隐藏DIv
- toggle一个div显示或隐藏且可扩展成自定义下拉框
- 利用JS做到隐藏div和显示div