树形菜单Demo

最新推荐文章于 2025-09-06 15:22:58 发布
原创 最新推荐文章于 2025-09-06 15:22:58 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

这篇博客展示了如何使用HTML、CSS和JavaScript创建一个交互式的树形菜单。HTML部分包括`<ul>`和`<li>`元素来构建菜单结构，JavaScript处理菜单的展开和收缩事件，而CSS用于样式设计，如背景颜色、边框和链接样式。这个菜单适用于网页应用的导航，允许用户方便地访问不同层级的子菜单项。

menu.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path + "/";
%>
<html>
 <link rel="stylesheet" type="text/css" href="<%=basePath%>css/menu.css">
 <head>
  <title>树形菜单</title>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 </head>
<body class="panel" topmargin="0" leftmargin="0">
<div id="body" style="width: 200px"><!-- OA树开始-->
<ul id="menu">
 <li class="L1"><a href="javascript:c(m01);" id="m01"><span><img
  src="<%=basePath%>images/ico/2.gif" align="absMiddle" /> 客户关系管理系统</span> </a></li>
 <ul id="m01d" style="display: none;" class="U1">
  <li class="L21"><a href="javascript:c(f01);" id="f01"><span><img
   src="<%=basePath%>images/ico/2.gif" align="absMiddle" /> 文件管理</span> </a></li>
  <ul id="f01d" style="display: none;">
   <li class="L3"><a href="fileList.action" target="mainRight"><span><img
    src="<%=basePath%>images/ico/2.gif" align="absMiddle" />文件列表</span> </a></li>
   <li class="L3"><a href="toUploadJsp.action" target="mainRight"><span><img
    src="<%=basePath%>images/ico/2.gif" align="absMiddle" />文件上传</span> </a></li>
  </ul>
  <li class="L21"><a href="javascript:c(f02);" id="f02"><span><img
   src="<%=basePath%>images/ico/2.gif" align="absMiddle" />111111</span> </a></li>
  <ul id="f02d" style="display: none;">
   <li class="L3"><a href="" target="mainRight"><span><img
    src="<%=basePath%>images/ico/2.gif" align="absMiddle" />000001</span> </a></li>
   <li class="L3"><a href="" target="mainRight"><span><img
    src="<%=basePath%>images/ico/2.gif" align="absMiddle" />000002</span> </a></li>
   <li class="L3"><a href="" target="mainRight"><span><img
    src="<%=basePath%>images/ico/2.gif" align="absMiddle" />000003</span> </a></li>
   <li class="L3"><a href="" target="mainRight"><span><img
    src="<%=basePath%>images/ico/2.gif" align="absMiddle" />000004</span> </a></li>
   <li class="L3"><a href="" target="mainRight"><span><img
    src="<%=basePath%>images/ico/2.gif" align="absMiddle" />000005</span> </a></li>
  </ul>
 </ul>
</ul>
</div>
<div id="bottom"></div>
<script type="text/javascript" src="<%=basePath%>js/menu.js"></script>
</body>
</html>

menu.js:

var cur_id = "";
var flag = 0, sflag = 0;
//-------- 菜单点击事件 -------
function c(srcelement) {
 var targetid, srcelement, targetelement;
 var strbuf;

 //-------- 如果点击了展开或收缩按钮---------
 targetid = srcelement.id + "d";
 targetelement = document.getElementById(targetid);

 if (targetelement.style.display == "none") {
  srcelement.className = "active";
  targetelement.style.display = '';

  menu_flag = 0;

 } else {
  srcelement.className = "";
  targetelement.style.display = "none";

  menu_flag = 1;

  var links = document.getElementsByTagName("A");
  for (i = 0; i < links.length; i++) {

最低0.47元/天 解锁文章
三行代码实现树形菜单（多种风格的菜单展示）
轻松互联网开发,Easy do it,大数据,hadoop,hbase,vertica,java开发
04-04 9615
风格1：图片路径为help/tree；风格2：图片路径为base/tree（轻开B2C电子商务网站组织机构实例，文件为base/xml/tree.html）；风格3：图片路径为help/tree/1；风格4：图片路径为help/tree/2；风格5：图片路径为help/tree/3
js+css简单后台二级树形菜单demo示例
07-03
在这个“js+css简单后台二级树形菜单demo示例”中，我们将探讨如何利用JavaScript和CSS来创建一个后台管理界面的二级树形菜单。这个示例将涵盖以下几个关键知识点： 1. **HTML 结构**： - 树形菜单的基础是HTML的...
ztree树形菜单demo
09-11
这个是一个简单ztree树形菜单的demo,可以实现节点的显示等.打开a文件就可以查看
jsp树形菜单 dtree tree 树形菜单
04-29
自己动手做的一个树形菜单demo，对数据库中不同层次的节点进行分类，实现起来和简单，只需要一个servlet或者struts action，然后再页面使用dtree
基于JSP的WEBtree树形菜单开发实战详解
最新发布
weixin_36303305的博客
09-06 1095
JSP作为Servlet技术的扩展，本质上会在运行时被编译为Servlet，从而生成动态HTML内容。理解JSP的生命周期和执行流程，是高效使用其进行开发的前提。本章详细探讨了Servlet在树形菜单系统中的核心作用，包括接收请求、构建菜单结构、数据传递机制及权限控制策略。通过合理的数据结构设计、递归构建逻辑、缓存机制优化和权限校验流程，可以实现一个高效、安全、可维护的菜单系统。下一章将介绍如何通过AJAX实现异步加载，进一步提升用户体验与系统性能。
JSP 树状菜单
zhangwei_511304的专栏
06-04 1339
1）初始化菜单     2）调用函数          显然，如果用动态的脚本来初始化菜单数组（asp,jsp均可），那就可以很方便的实现动态的树型菜单了。 2。jsp动态实现   分以下步骤实现动态的树型菜单：   1）在数据库建tree_info表，有nodeId，parentNodeId，nodeName，nodeUrl四个字段，来存储节点信息。   2）编写java类，用于从数据库找出节点
自写JQ控件-树状菜单控件[demo下载]
weixin_30951743的博客
07-26 160
一个多月没有写博客了，最近也弄一个基于JQ的树状菜单控件，在此分享给大家。另外呢，通过这个例子分享一下怎么写JQ控件的。 事实上工作中，也是经常遇到的，有些时候自己想实现一些前端效果，用网上一些插件吧，很强大，但是一些样式可能不是你想要的，改起来牵一发而动全身。这种情况自己写控件会好一些。 【小宝鸽也是前端菜鸟，毕竟咱们算是专攻后台的，不规范的地方还望猿友指正】 费话不多...
ztree树形菜单、ztree树形菜单demo
04-08
**zTree：强大的JavaScript树形菜单库** zTree是一款基于JavaScript的开源树形插件，广泛应用于网页中的数据展示和交互操作。它以其轻量级、高性能和丰富的配置选项而受到开发者的青睐。zTree的核心功能是将JSON...
unity树形结构菜单demo
05-30
可动态添加分级目录，可勾选，全选，自动拓展！
树形菜单Demo[超详细注释]
Shaw_Jie的博客
09-20 264
超详细注释，看不懂的抄一遍必会
Java漂亮的树形菜单制作实例（源码）.rar
07-10
Java漂亮的树形菜单制作实例（源码），森林状的关系图，文本域,用于显示点击的节点名称，使用了JTree，可以看作是一个jTree的用法演示实例。树形菜单应用广泛，这个Tree制作漂亮，相信会让很多朋友从中学习到实现的方法，效果如演示截图所示。下面是相关的代码片段： 　　DefaultMutableTreeNode root = new DefaultMutableTreeNode("设置"); //生成根节点 　　DefaultMutableTreeNode node1=new DefaultMutableTreeNode("常规"); //生成节点一 　　node1.add(new DefaultMutableTreeNode("默认路径")); //增加新节点到节点一上 　　node1.add(new DefaultMutableTreeNode("保存选项")); 　　root.add(node1); //增加节点一到根节点上 　　root.add(new DefaultMutableTreeNode("界面")); 　　root.add(new DefaultMutableTreeNode("提示声音")); 　　root.add(new DefaultMutableTreeNode("打印")); 　　JTree tree = new JTree(root); //得到JTree的实例 　　DefaultTreeCellRenderer renderer = (DefaultTreeCellRenderer)tree.getCellRenderer(); //得到JTree的Renderer 　　renderer.setLeafIcon(null); //设置叶子节点图标为空 　　renderer.setClosedIcon(null); //设置关闭节点的图标为空 　　renderer.setOpenIcon(null); //设置打开节点的图标为空 　　tree.addTreeSelectionListener(new TreeSelectionListener() {//选择节点的事件处理 　　public void valueChanged(TreeSelectionEvent evt) { 　　TreePath path = evt.getPath(); //得到选择路径 　　String info=path.getLastPathComponent().toString(); //得到选择的节点名称 　　jtfInfo.setText(info); //在文本域中显示名称 　　}
简单树形导航demo
05-28
NULL 博文链接：https://wf42988.iteye.com/blog/672042
html树形菜单
07-21
html 简单树形菜单demo
jsp 树形菜单
07-08
这是一个帮助大家轻松实现树形菜单dTree组件
JSP树形菜单(WEBtree)
05-17
内容索引:JSP源码,精品代码,树形菜单　　一款不错的基于JAVA的WEB树状菜单，非常漂亮，核心由JAVA代码完成，可以方便的应用到你的JSP项目中，压缩包的WEBROOT目录下其实就是一个使用实例，另外还附有JAVA的全部代码。
jsp页面中树形菜单
jieliguge的博客
03-15 8964
https://www.cnblogs.com/jyh317/p/3763564.html
JSP与树型菜单
yihuei123的专栏
09-17 1454
JSP与树型菜单
树形表格demo
qq_41742961的博客
09-15 273
<template> <el-card class="tree-card" shadow="never"> <div v-loading="loading"> <div class="tree-head"> <!-- <div class="tree-head-check"> <el-checkbox v-model="checkAll" @change="onCheckAll
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值