打造网页中的树型菜单-阿里云开发者社区

打造网页中的树型菜单

2024-09-29 20

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 打造网页中的树型菜单

!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=/"cursor: pointer;/" οnclick=/"expendDir("+ i + ");/">┼</b>&nbsp;"
}

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 ? "└─&nbsp;" : "├─&nbsp;");

  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>

 

使用图形版:

<!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=/"cursor: pointer;/" οnclick=/"expendDir("+ i + ");/">┼</b>&nbsp;"
}

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 ? "└─&nbsp;" : "├─&nbsp;");

  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>

打造网页中的树型菜单

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

打造网页中的树型菜单

热门文章

最新文章

相关电子书