使用JavaScript在ASP中创建树形菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/guanzg/article/details/742777

这篇博客介绍如何在ASP中实现树状菜单，通过JavaScript编写函数Tree()来控制菜单的开始、结束、添加菜单项以及子菜单的显示与隐藏。提供了具体的代码实例，包括在<head>和<body>部分的实现，以及菜单项的控制函数menuChange()用于切换子菜单的显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在<head></head>中加定义菜单的函数

this.end=function() //菜单结束
{
document.writeln("</table>");
}

this.addItem=function(cText,cLink,bChild,bShow) //为菜单增加项，参数依次为：菜单文字、菜单链接、是否有子菜单、子菜单是否显示。
{
    document.writeln("<tr><td><nobr><span class=menu_icon"+(bChild?" onclick=menuChange(this)":"")+">"
    +(bChild?(bShow?"－":"＋"):"·")+"</span><span class=menu_space> </span><a href="+cLink+" target=/"mainFrame/">"+cText+"</a></nobr></td></tr>");
}

this.childStart=function(bShow) //子选项开始，bShow为是否显示
{
    document.writeln("<tr style='display:"+(bShow?"block":"none")+"'><td>");
    document.writeln("<table cellpadding=1 cellspacing=0 style='margin-left:12px;'>");
}

this.childEnd=function() //子选项结束
{
document.writeln("</table>");
document.writeln("</td></tr>");
}
}

function menuChange(obj) //控制菜单显示/隐藏
{
obj=obj.parentNode.parentNode.parentNode;
obj.nextSibling.style.display=(obj.nextSibling.style.display=='none'?'block':'none');
obj.cells[0].childNodes[0].childNodes[0].innerText=(obj.nextSibling.style.display=='none'?'＋':'－')
}
</script>

然后在<body></body>中需要加入菜单的地方加入菜单实例,如下例子;

cmsTree.childStart(0); //注意这个参数与上面最后一个参数是一致的
cmsTree.addItem("基本信息","modpersonal.asp",0);
cmsTree.addItem("教育程度","educate.asp",0);
cmsTree.addItem("联系方式","linkkind.asp",0);
cmsTree.addItem("基本技能","personalart.asp",0);
cmsTree.addItem("个人自述","personalsynopsis.asp",0);
cmsTree.addItem("工作技能及特长","personalworkart.asp",0);
cmsTree.addItem("个人简历","career.asp",0)
cmsTree.addItem("学历教育或培训经历","studysuffer.asp",0);
cmsTree.childEnd();

cmsTree.addItem("工作意向","personalright.asp",1,0) //后面两个参数分别表示是否有子菜单，子菜单是否显示
cmsTree.childStart(1); //注意这个参数与上面最后一个参数是一致的
cmsTree.addItem("职业,月薪,要求地区","personaljob.asp",0);
cmsTree.childEnd();

cmsTree.addItem("工作机会","personalright.asp",1,0);
cmsTree.childStart(0); //注意这个参数与上面最后一个参数是一致的
cmsTree.addItem("企业招聘信息","business.asp",0);

cmsTree.childEnd();

cmsTree.addItem("帮助","help.asp",0);
cmsTree.addItem("退出","loginout.asp",0);
cmsTree.end();
</script>

注：在.net里，简单的菜单也可以用，方法一样的