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

打造网页中的树型菜单

2024-09-29 29
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 打造网页中的树型菜单 
!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
目录
相关文章
黄啊码
绚丽的网页菜单
绚丽的网页菜单
黄啊码
120 0
walb呀
|
数据库 索引 容器
Winform开发主界面菜单的动态树形列表展示
walb呀
2114 0
科技小先锋
|
容器
网页中控件查找
科技小先锋
828 0
微wx笑
|
Shell C# Windows
将指定网页添加到收藏夹的方法(c#)
源码src下载地址：http://download.csdn.net/detail/testcs_dn/5137650 昨天想实现一个小功能，就是把正在浏览的某网页添加到收藏夹中。以前在页面直接用JAVASCRIPT调用一个方法就搞定了，现在我是想用WINFORM来实现，我自己找了一下没有看到相关的方法（可能找的不仔细）。
微wx笑
692 0
科技小能手
如何解决EasyUI树菜单单击文字无法展开菜单的问题
科技小能手
1283 0
greework
|
Web App开发 移动开发 前端开发
网页|扇形菜单—你不get一下吗？
网页|扇形菜单—你不get一下吗？
greework
166 0
justinliu927
|
.NET Windows 开发框架
SharePoint开发 - 自定义导航菜单（二）母版页的菜单应用
博客地址 http://blog.csdn.net/foxdave 接上篇点击打开链接 本篇叙述在母版页中应用之前的配置信息生成菜单，主要涉及到母版页的自定义，并应用了第三方控件库DevExpress，感兴趣的可以看看，这套东西很强大，戳这里 新建一个SharePoint项目，添加一个模块Module。
justinliu927
939 0
小吴吴吴呀
|
9月前
|
JSON JavaScript 数据格式
jQuery 树型菜单完整代码
jQuery 树型菜单完整代码
小吴吴吴呀
44 0
技术小美
|
SQL 数据库 移动开发
树型控件的处理（完整版）
技术小美
874 0
微wx笑
|
C#
c#通过纯代码创建桌面快捷方式、创建程序菜单项、将网页添加到收藏夹
c#通过纯代码创建桌面快捷方式、创建程序菜单项、将网页添加到收藏夹 本文章源代码Src下载地址：http://download.csdn.net/detail/testcs_dn/5141580 开始菜单》程序菜单项： 添加到收藏夹： 相关函数代码： public const int SW_SHOWNORMAL = 1; /// /// 创建快捷方式。
微wx笑
1145 0

热门文章

最新文章

  • 1
    deepseek部署的详细步骤和方法，基于Ollama获取顶级推理能力！
  • 2
    讨论阶段性给予客户交付物所引发的风险问题
  • 3
    Linus Torvalds将中国亮相LinuxCon + ContainerCon + CloudOpen
  • 4
    DispatcherServlet与初始化主线
  • 5
    网络安全研究人员发现新漏洞：或成另一个WannaCry
  • 6
    Swift中常量和变量的声明
  • 7
    [20160516]adrci purge.txt
  • 8
    Docker Secure Deployment Guidelines
  • 9
    Eclipse没有权限操作rt.jar包中的sun包，导致sun.net.ftp.FtpClient引用报错
  • 10
    Learning Cocos2d-x for WP8（9）——Sprite到哪，我做主
  • 1
    去中心化存储：数据存储的新范式
    117
  • 2
    AI 赋能混合云运维：告别手工操作，迈向智能自愈！
    116
  • 3
    从Excel到大数据：别让工具限制你的思维！
    110
  • 4
    Go 切片导致 rand.Shuffle 产生重复数据的原因与解决方案
    97
  • 5
    基于SVPWM矢量控制的无速度传感器电机控制系统simulink建模与仿真
    34
  • 6
    基于小波变换和峰值搜索的光谱检测matlab仿真,带GUI界面
    38
  • 7
    DragAnything：视频PS来了！开源AI控制器让视频「指哪动哪」：拖拽任意物体轨迹，多对象独立运动一键生成
    41
  • 8
    FoloUp：比HR更懂岗位需求！开源语音面试平台爆火：1份岗位需求生成100问，语音AI追问逻辑漏洞
    29
  • 9
    KTransformers：告别天价显卡！国产框架让单卡24G显存跑DeepSeek-R1 671B大模型：推理速度飙升28倍
    305
  • 10
    基于深度学习的路面裂缝检测算法matlab仿真
    24

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云oss简介和如何对接使用