AI 助理
备案控制台
开发者社区 云计算 文章 正文

打造网页中的树型菜单

2024-09-29 9
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 打造网页中的树型菜单 
!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>
游客qeoynko2nmbgk
目录
相关文章
a15034260562-24955
|
5月前
publiccms实现多层级选项卡效果
publiccms实现多层级选项卡效果
a15034260562-24955
29 0
现在是571
|
5月前
|
JSON 数据库 数据格式
Layui实现树状菜单
Layui实现树状菜单
现在是571
41 0
阿甘兄
|
12月前
54EasyUI 树形菜单- 树形菜单拖放控制
54EasyUI 树形菜单- 树形菜单拖放控制
阿甘兄
37 0
闻缺陷则喜何志丹
|
12月前
树状控件的应用(选择出阵武将)
树状控件的应用(选择出阵武将)
闻缺陷则喜何志丹
43 0
黄啊码
绚丽的网页菜单
绚丽的网页菜单
黄啊码
106 0
wangccsy
|
JavaScript Android开发 索引
第二十四章：页面导航（十）
属性和方法调用调用PushAsync或PushModalAsync的页面显然可以直接访问它导航到的类，因此它可以设置属性或调用该页面对象中的方法以将信息传递给它。但是，调用PopAsync或PopModalAsync的页面还有一些工作要做，以确定它返回的页面。
wangccsy
545 0
wangccsy
|
JavaScript Android开发
第二十四章：页面导航（九）
数据传输模式 多页面应用程序中的页面通常需要共享数据，特别是一页面将信息传递到另一页面。 有时此过程类似于函数调用：当HomePage显示项目列表并导航到DetailPage以显示其中一个项目的详细视图时，HomePage必须将该特定项目传递给DetailPage。
wangccsy
621 0
wangccsy
|
JavaScript Android开发
第二十四章：页面导航（六）
制作导航菜单如果您的应用程序包含各种不同但在架构上相同的页面，所有这些页面都可以从主页导航，那么您可能有兴趣构建有时称为导航菜单的页面。 这是一个菜单，其中每个条目都是特定的页面类型。ViewGalleryType程序旨在演示Xamarin.Forms中的所有View类。
wangccsy
702 0
wangccsy
|
JavaScript Android开发
第二十四章：页面导航（五）
导航变化 当您尝试使用ModalEnforcement和MvvmEnforcement程序时，您可能会对模态页面未能保留任何信息感到不安。我们都遇到了导航到用于输入信息的页面的程序和网站，但是当您离开该页面然后再返回时，您输入的所有信息都消失了！这样的页面可能非常烦人。
wangccsy
674 0
wangccsy
|
JavaScript Android开发 iOS开发
第二十四章：页面导航（三）
探索力学如您所见，Push和Pop方法返回Task对象。 通常，在调用这些方法时，您将使用await。 这是在ModelessAndModal的MainPage类中调用PushAsync： await Navigation.PushAsync(new ModelessPage()); 假设您在此声明后面有一些代码。
wangccsy
666 0