实现网页的树形菜单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>TreeMenu</TITLE> <META NAME="Generator" CONTENT="EditPlus">  <META NAME="Author" CONTENT="PurpleEndurer"> <META NAME="Keywords" CONTENT="网页制作,JavaScript,树型目录,树型菜单"> <META NAME="Description" CONTENT="网页制作,JavaScript,树型目录,树型菜单"> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript">  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">  <META NAME="Author" CONTENT="PurpleEndurer"> <META NAME="Keywords" CONTENT="网页制作,JavaScript,树型目录,树型菜单"> <META NAME="Description" CONTENT="网页制作,JavaScript,树型目录,树型菜单"> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript">  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>

秒客网

实现网页的树形菜单

相关文章