树形列表实现方法_function opencat-优快云博客

本文链接：https://blog.youkuaiyun.com/TTS_Kevin/article/details/6322538

本文展示了一个使用Java实现的软件开发菜单示例，通过HTML和JavaScript实现了菜单项的展开和收起效果，并包含了基本的样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果图：

显示效果收页面

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link href="img/css.css" mce_href="img/css.css" type="text/css" rel="stylesheet"> <mce:script src="js/content.js" mce_src="js/content.js"></mce:script> </head> <body bgcolor="#E1F0FF">  <table cellspacing="0" cellpadding="0" width="100%" align="center" bgcolor="#e6e6e6" border="0"> <tr bgcolor="#E1F0FF"> <td language="javascript" onmouseup="opencat(cat101005,img101005);" id="item$pval[CatID])" onmouseover="this.bgColor='#A2DBCE';" style="CURSOR: hand" mce_style="CURSOR: hand" onmouseout="this.bgColor='#E1F0FF';" height="24"> <img id="img101005" height="20" src="img/class1.gif" mce_src="img/class1.gif" width="20" align="absMiddle" /> 软件开发 </td> </tr> <tr> <%-- 类型树--%> <td id="cat101005" style="DISPLAY: none" mce_style="DISPLAY: none" bgcolor="#fefdf5"> <img height="20" src="img/class3.gif" mce_src="img/class3.gif" width="36" align="absMiddle" border="0" alt="" /> <a target="ParenRight" href="java.jsp" mce_href="java.jsp">java开发</a><br /> <img height="20" src="img/class3.gif" mce_src="img/class3.gif" width="36" align="absMiddle" border="0" alt="" /> <a target="mainFrame" href="android.jsp" mce_href="android.jsp">android开发</a><br /> </td> </tr> </table> </body> </html>

用到的脚本css

BODY{ background-image: url(../Images/bg_1.gif); scrollbar-face-color: #C0C0C0; scrollbar-highlight-color: #C0C0C0; scrollbar-shadow-color: #C0C0C0; scrollbar-3dlight-color: #E0E0E0; scrollbar-arrow-color: #333333; scrollbar-track-color: #E0E0E0; background-position: center; } td{font-size:9pt;line-height:120%;color:#353535} body{font-size:9pt;line-height:120%} a:link { color: #000000; text-decoration: none } a:visited { color: #000000; text-decoration: none } a:active { color: #000000; text-decoration: none } a:hover { color: #0099cc; text-decoration: none; position: relative; right: 0px; top: 0px } .table-Line {border-bottom-width: 1px;border-bottom-style: dotted;border-bottom-color: #cccccc;border-right-width: 1px;border-right-style: dotted;border-right-color: #cccccc;} .table-z {border-left-width: 1px;border-left-style: dotted;border-left-color: #cccccc; border-top-width: 1px; order-top-style: dotted; border-top-color: #cccccc; border-top-style: dotted;}

用到的脚本js