打造网页中的树型菜单

来源：互联网发布：电脑ppt制作软件编辑：程序博客网时间：2024/05/22 09:15

<!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=/"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=/"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=/"");
   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=/"");
   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>

使用图形版: