自己写的简单大方的树形导航菜单

来源:互联网 发布:老挝语翻译器软件 编辑:程序博客网 时间:2024/04/29 10:05

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>简单大方的树形导航菜单演示</title>
<STYLE type="text/css">
div {
font-size:12px;
color: #000000;
LINE-HEIGHT: 22px;
}

A {
font-size: 13px;
color: #000000;
text-decoration:none
}

A:hover {
font-size: 13px;
color: #999999
}

.red {
color: #FF0000
}
</STYLE>
<SCRIPT language="JavaScript">
function show(d1){
debugger;
if (document.getElementById(d1).style.display == 'none') {
document.getElementById(d1).style.display = 'block'; //触动的层如果处于隐藏状态,即显示
//"t"+d1:获得单击对象对应的img元素的id,即:t1,t2,t3,t4
document.getElementById("t"+d1).src="images/folderopen.gif";
}
else {
document.getElementById(d1).style.display = 'none'; //触动的层如果处于显示状态,即隐藏
document.getElementById("t"+d1).src="images/folder.gif";
}
}
</SCRIPT>
</head>
<body>
<div style="padding-left:0px;">
<div> <A href="javascript:onClick=show('1') "> <IMG src="images/folder.gif" name="t1" id="t1" border="0" align="absmiddle">分类讨论区 </A> </div>
<div id="1" style="display:none;padding-left:15px;"> <IMG src="images/nolines_minus.gif" align="absmiddle">BBS 系统<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">共建水木<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">站务公告栏<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">妆点水木<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">申请版主 </div>
<div> <A href="javascript: onClick=show('2') "> <IMG src="images/folder.gif" name="t2" id="t2" border="0" align="absmiddle">社会信息 </A> </div>
<div id="2" style="display:none;padding-left:15px;"> <IMG src="images/nolines_minus.gif" align="absmiddle">美容品与饰品代理<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">考研资料市场<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">商海纵横<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">动物保护者<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">动物世界<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">中国风·神州各地 </div>
<div> <A href="javascript: onClick=show('3') "> <IMG src="images/folder.gif" name="t3" id="t3" border="0" align="absmiddle">休闲娱乐 </A> </div>
<div id="3" style="display:none;padding-left:15px;"> <IMG src="images/nolines_minus.gif" align="absmiddle">ASCIIArt全国转信<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">七彩水木<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">网友聚会<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">醉品人生<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">花木园艺<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">祝福 </div>
<div> <A href="javascript: onClick=show('4') "> <IMG src="images/folder.gif" name="t4" id="t4" border="0" align="absmiddle">电脑技术 </A> </div>
<div id="4" style="display:none;padding-left:15px;"> <IMG src="images/nolines_minus.gif" align="absmiddle">BBS安装管理<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">CAD技术<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">数字图像设计<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">电脑音乐制作<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">软件加密与解密<br />
<IMG src="images/nolines_minus.gif" align="absmiddle">计算机体系结构 </div>
</div>
</body>
</html>

原创粉丝点击