实现网页的树形菜单时间：2022-01-24 16:03:37<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>TreeMenu</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <!-- 2006-04-28 改进，使用制表符 2006-04-27 创建 //--> <META NAME="Author" CONTENT="PurpleEndurer"> <META NAME="Keywords" CONTENT="网页制作,JavaScript,树型目录,树型菜单"> <META NAME="Description" CONTENT="网页制作,JavaScript,树型目录,树型菜单"> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- var root = new Array(); root[0] = new Array("/index.htm*测试网页", "/scenery/list.htm?1*风光", "#*子目录2", "#*子目录3"); root[1] = new Array("#*主目录2", "#*子目录1", "#*子目录2", "#*子目录3"); var strPreURL ="http://www.csdn.net/"; //--> function expendDir(i) { var dir = eval("document.all.dir" + i); var plus = eval("document.all.plus" + i); dir.style.display = ("none"==dir.style.display) ? "" : "none"; plus.innerText = ("none"==dir.style.display) ? "┼" : (0==i ? "┬" : "├"); } function subdirstr(i) { return "<b id=/"plus"+ i + "/" style="/" mce_style="/""cursor: pointer;/" onclick=/"expendDir("+ i + ");/">┼</b> " } function writeSubItem(i) { var subitemlen = root[i].length; document.write("<div id=/"dir"); document.write(i); document.write("/" style="/" mce_style="/""display:none/">"); subitemlen--; for (j = 1; j <= subitemlen; j++) { substr = root[i][j].split('*'); document.write(j == subitemlen ? "└─ " : "├─ "); if ("#" == substr[0]) { document.write(); document.write(substr[1]); } else { document.write("<a href="/" mce_href="/"""); document.write(strPreURL); document.write(substr[0]); document.write("/">"); document.write(substr[1]); document.write("</a>"); } document.write("<BR>"); } //for(j) document.write("</div>"); } //writeSubItem() function showMenu() { var i, j, RootLen = root.length; if (0==RootLen) { document.write("暂无菜单"); return; } for (i = 0; i < RootLen; i++) { var subitemlen = root[i].length; var substr = root[i][0].split('*'); document.write(subitemlen>1 ? subdirstr(i) : '-'); if ("#" == substr[0]) { document.write(substr[1]); } else { document.write("<a href="/" mce_href="/"""); document.write(strPreURL); document.write(substr[0]); document.write("/" target=/"ifrmInfo/" class=/"TreeItemLink/">"); document.write(substr[1]); document.write("</a>"); } //if if (subitemlen > 1) { writeSubItem(i); } document.write("<BR>"); } //for(i); } //ShowMenu() showMenu(); </SCRIPT> </BODY> </HTML> 使用图形版: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>TreeMenu</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <!-- 2006-04-28 改进，使用制表符 2006-04-27 创建 //--> <META NAME="Author" CONTENT="PurpleEndurer"> <META NAME="Keywords" CONTENT="网页制作,JavaScript,树型目录,树型菜单"> <META NAME="Description" CONTENT="网页制作,JavaScript,树型目录,树型菜单"> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- var root = new Array(); root[0] = new Array("/index.htm*河池市农业信息网首页", "/scenery/list.htm?1*河池风光", "#*子目录2", "#*子目录3"); root[1] = new Array("#*主目录2", "#*子目录1", "#*子目录2", "#*子目录3"); var strPreURL ="http://www.hcny.gov.cn"; //--> function expendDir(i) { var dir = eval("document.all.dir" + i); var plus = eval("document.all.plus" + i); dir.style.display = ("none"==dir.style.display) ? "" : "none"; plus.innerText = ("none"==dir.style.display) ? "┼" : (0==i ? "┬" : "├"); } function subdirstr(i) { return "<b id=/"plus"+ i + "/" style="/" mce_style="/""cursor: pointer;/" onclick=/"expendDir("+ i + ");/">┼</b> " } function writeSubItem(i) { var subitemlen = root[i].length; document.write("<div id=/"dir"); document.write(i); document.write("/" style="/" mce_style="/""display:none/">"); subitemlen--; for (j = 1; j <= subitemlen; j++) { substr = root[i][j].split('*'); document.write(j == subitemlen ? "└─ " : "├─ "); if ("#" == substr[0]) { document.write(); document.write(substr[1]); } else { document.write("<a href="/" mce_href="/"""); document.write(strPreURL); document.write(substr[0]); document.write("/">"); document.write(substr[1]); document.write("</a>"); } document.write("<BR>"); } //for(j) document.write("</div>"); } //writeSubItem() function showMenu() { var i, j, RootLen = root.length; if (0==RootLen) { document.write("暂无菜单"); return; } for (i = 0; i < RootLen; i++) { var subitemlen = root[i].length; var substr = root[i][0].split('*'); document.write(subitemlen>1 ? subdirstr(i) : '-'); if ("#" == substr[0]) { document.write(substr[1]); } else { document.write("<a href="/" mce_href="/"""); document.write(strPreURL); document.write(substr[0]); document.write("/" target=/"ifrmInfo/" class=/"TreeItemLink/">"); document.write(substr[1]); document.write("</a>"); } //if if (subitemlen > 1) { writeSubItem(i); } document.write("<BR>"); } //for(i); } //ShowMenu() showMenu(); </SCRIPT> </BODY> </HTML>
