⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 index.htm

📁 使用JavaScript实现的树型菜单,简单实用
💻 HTM
字号:
<html>
<head>
<title>树形菜单</title>
<script language='javascript'>
<!--
	current_div_id = -1;
	function diva_show(div_id,URL,endrow,hasSon)
	{
		//如果已经展开
		if (document.all.item('a'+div_id).style.display == 'block')
		{
			document.all.item('a'+div_id).style.display = 'none';
			//如果有下级菜单
			if (hasSon>=1)
			 {
				document.all.item('i'+div_id).src= "images/close.gif";
				//如果是同级中的最后一个菜单项
				if (endrow==1) {
					document.all.item('f'+div_id).src='images/plus1_end.gif';
				 }else{
					document.all.item('f'+div_id).src='images/plus1.gif';
				 }
			 }
		}
		else
		{
			document.all.item('a'+div_id).style.display = 'block';
			if (hasSon>=1)
			 {
				document.all.item('i'+div_id).src= "images/open.gif";
				if (endrow==1) {
					document.all.item('f'+div_id).src='images/minus_end.gif';
				 }else{
					document.all.item('f'+div_id).src='images/minus.gif';
				 }
			 }
		}
		//如果不是第一次点击菜单项
		if (current_div_id != -1)
		{
			document.all.item('link'+current_div_id).style.color = '#000000'; 
		}
		current_div_id = div_id;
		document.all.item('link'+div_id).style.color = 'blue';
		if (URL!="")alert('你点击的是:'+URL);//在此加入你自己的处理程序
	}
-->
</script>
<link href='css/treemenu.css' rel='stylesheet' type='text/css'>
</head>
<body topmargin='10' leftmargin='10' bgcolor='#FFFFFF' >
<table BORDER='0' CELLSPACING='0' CELLPADDING='0'>
	<tr>
		<td valign='top' align='left'><img src='images/root.gif' width='100' height='20'></td>
	</tr>
</table>

<table CELLSPACING='0' CELLPADDING='0'>
	<tr>
		<td><a href='#' onClick="diva_show('1','','0','1')" id='linka1'><img name='f1' SRC='images/plus1.gif' border='0'></a></td>
		<td><a href='#' onClick="diva_show('1','','0','1')" id='linkb1'><img name='i1' SRC='images/close.gif' border='0'></a></td>
		<td><a href='#' onClick="diva_show('1','','0','1')" id='link1'>&nbsp;知识管理</a></td>
	</tr>
</table>
<div id='a1' style='display:none'>
<table WIDTH='100%' BORDER='0' CELLSPACING='0' CELLPADDING='0'>
	<tr>
		<td width='16' background='images/line.gif'></td>
		<td>
			<table CELLSPACING='0' CELLPADDING='0'>
				<tr>
					<td><a href='#' onClick="diva_show('11','index1.jsp','0','0')" id='linka11'><img name='f11' SRC='images/noSonLine.gif' border='0'></a></td>
					<td><a href='#' onClick="diva_show('11','index1.jsp','0','0')" id='linkb11'><img name='i11' SRC='images/close.gif' border='0'></a></td>
					<td><a href='#' onClick="diva_show('11','index1.jsp','0','0')" id='link11'>&nbsp;新增栏目</a></td>
				</tr>
			</table>
			<div id='a11' style='display:none'>
			<table WIDTH='100%' BORDER='0' CELLSPACING='0' CELLPADDING='0'>
			</table>
			</div>
		</td>
	</tr>
	<tr>
		<td width='16' background='images/line.gif'></td>
		<td>
			<table CELLSPACING='0' CELLPADDING='0'>
				<tr>
					<td><a href='#' onClick="diva_show('12','index2.jsp','0','0')" id='linka12'><img name='f12' SRC='images/noSonLine.gif' border='0'></a></td>
					<td><a href='#' onClick="diva_show('12','index2.jsp','0','0')" id='linkb12'><img name='i12' SRC='images/close.gif' border='0'></a></td>
					<td><a href='#' onClick="diva_show('12','index2.jsp','0','0')" id='link12'>&nbsp;调整栏目</a></td>
				</tr>
			</table>
			<div id='a12' style='display:none'>
			<table WIDTH='100%' BORDER='0' CELLSPACING='0' CELLPADDING='0'>
			</table>
			</div>
		</td>
	</tr>
	<tr>
		<td width='16' background='images/line.gif'></td>
		<td>
			<table CELLSPACING='0' CELLPADDING='0'>
				<tr>
					<td><a href='#' onClick="diva_show('13','index3.jsp','1','0')" id='linka13'><img name='f13' SRC='images/endline.gif' border='0'></a></td>
					<td><a href='#' onClick="diva_show('13','index3.jsp','1','0')" id='linkb13'><img name='i13' SRC='images/close.gif' border='0'></a></td>
					<td><a href='#' onClick="diva_show('13','index3.jsp','1','0')" id='link13'>&nbsp;内容维护</a></td>
				</tr>
			</table>
			<div id='a13' style='display:none'>
			<table WIDTH='100%' BORDER='0' CELLSPACING='0' CELLPADDING='0'>
			</table>
			</div>
		</td>
	</tr>
</table>
</div>

<table CELLSPACING='0' CELLPADDING='0'>
	<tr>
		<td><a href='#' onClick="diva_show('2','','0','1')" id='linka2'><img name='f2' SRC='images/plus1.gif' border='0'></a></td>
		<td><a href='#' onClick="diva_show('2','','0','1')" id='linkb2'><img name='i2' SRC='images/close.gif' border='0'></a></td>
		<td><a href='#' onClick="diva_show('2','','0','1')" id='link2'>&nbsp;系统管理</a></td>
	</tr>
</table>
<div id='a2' style='display:none'>
<table WIDTH='100%' BORDER='0' CELLSPACING='0' CELLPADDING='0'>
	<tr>
		<td width='16' background='images/line.gif'></td>
		<td>
			<table CELLSPACING='0' CELLPADDING='0'>
				<tr>
					<td><a href='#' onClick="diva_show('21','index1.jsp','0','0')" id='linka21'><img name='f21' SRC='images/noSonLine.gif' border='0'></a></td>
					<td><a href='#' onClick="diva_show('21','index1.jsp','0','0')" id='linkb21'><img name='i21' SRC='images/close.gif' border='0'></a></td>
					<td><a href='#' onClick="diva_show('21','index1.jsp','0','0')" id='link21'>&nbsp;新增栏目</a></td>
				</tr>
			</table>
			<div id='a21' style='display:none'>
			<table WIDTH='100%' BORDER='0' CELLSPACING='0' CELLPADDING='0'>
			</table>
			</div>
		</td>
	</tr>
	<tr>
		<td width='16' background='images/line.gif'></td>
		<td>
			<table CELLSPACING='0' CELLPADDING='0'>
				<tr>
					<td><a href='#' onClick="diva_show('22','index2.jsp','0','0')" id='linka22'><img name='f22' SRC='images/noSonLine.gif' border='0'></a></td>
					<td><a href='#' onClick="diva_show('22','index2.jsp','0','0')" id='linkb22'><img name='i22' SRC='images/close.gif' border='0'></a></td>
					<td><a href='#' onClick="diva_show('22','index2.jsp','0','0')" id='link22'>&nbsp;调整栏目</a></td>
				</tr>
			</table>
			<div id='a22' style='display:none'>
			<table WIDTH='100%' BORDER='0' CELLSPACING='0' CELLPADDING='0'>
			</table>
			</div>
		</td>
	</tr>
	<tr>
		<td width='16' background='images/line.gif'></td>
		<td>
			<table CELLSPACING='0' CELLPADDING='0'>
				<tr>
					<td><a href='#' onClick="diva_show('23','index3.jsp','1','0')" id='linka23'><img name='f23' SRC='images/endline.gif' border='0'></a></td>
					<td><a href='#' onClick="diva_show('23','index3.jsp','1','0')" id='linkb23'><img name='i23' SRC='images/close.gif' border='0'></a></td>
					<td><a href='#' onClick="diva_show('23','index3.jsp','1','0')" id='link23'>&nbsp;内容维护</a></td>
				</tr>
			</table>
			<div id='a23' style='display:none'>
			<table WIDTH='100%' BORDER='0' CELLSPACING='0' CELLPADDING='0'>
			</table>
			</div>
		</td>
	</tr>
</table>
</div>

<table CELLSPACING='0' CELLPADDING='0'>
	<tr>
		<td><a href='#' onClick="diva_show('3','logout.do','1','0')" id='linka3'><img name='f3' SRC='images/endline.gif' border='0'></a></td>
		<td><a href='#' onClick="diva_show('3','logout.do','1','0')" id='linkb3'><img name='i3' SRC='images/close.gif' border='0'></a></td>
		<td><a href='#' onClick="diva_show('3','logout.do','1','0')" id='link3'>&nbsp;安全退出</a></td>
	</tr>
</table>
<div id='a3' style='display:none'>
<table WIDTH='100%' BORDER='0' CELLSPACING='0' CELLPADDING='0'>
</table>
</div>

</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -