`

简单的二级树形(收藏)

HTMLIEJavaScriptXHTMLCSS 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>车辆GIS管理系统</title>
</head>
<style type="text/css">
            #webtree{
                width:156px;margin:0 auto;text-align:left;font: 12px/1.6em "Microsoft YaHei","微软雅黑","宋体",
    Verdana,arial,helvetica,sans-serif;padding-left:10px; margin:0px;
            }
            #webtree a:link,.webtree a:visited{
                color:#003;;text-decoration:none;
            }
            #webtree a:hover,.webtree a:active{
                color:#ff6600;text-decoration:none;
            }
            #webtree dl dt{
                color:gray;font-weight:bold;text-indent:20px;background:url(images/tree/ico_folder.gif) no-repeat 0 1px;
    height:20px;line-height:20px;cursor: pointer;
            }
   #webtree dd{
      margin:0px;  list-style:none;
      padding-left:10px;
   }
            #webtree ul{
                padding-left:20px;list-style:none; margin:0px;
    
            }
            #webtree li{
                 background:url(images/tree/t.gif) no-repeat; padding-left:40px;
            }
   #webtree li.Lst{
      background:url(images/tree/t_lst.gif) no-repeat 28px;
      }
            #webtree span{
                padding:0px; margin-left:18px;
            } 
   .TreeWrap {
    width:200px;
    margin-top: 3px;
   }
</style>
</head>  
<body bgcolor="#7bc5ed" >
<table border=0 borderlight="green" cellpadding="0" cellspacing="0" width="160" style="padding-left:10px;">
  <tr>
    <td width="7"  align=left>
   <table width="157" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="157"  height="25" id="menubg">系统菜单</td>
      </tr>
    </table>
   </td>
  </tr>
    <tr>
        <td>   
        <div id="webtree" >
        <dl>
            <dt><span>系统管理</span></dt>
            <dd>
                <ul>
     <li><a href="organ.html" target='main'>机构管理</a></li>
     <li><a href="#" target='main'>角色管理</a></li>
     <li><a href="#" target='main'>权限管理</a></li>
     <li style="background: url(images/tree/t_lst.gif) no-repeat;"><a href="" tppabs="#" target='main'>用户管理</a></li>
                </ul>
            </dd>
            <dt><span>资料管理</span></dt>
            <dd>
                <ul>
         <li><a href="car/carmanager.html" target='main'>车辆管理</a></li>
      <li><a href="car/carterminal.html" target='main'>车载终端管理</a></li>
      <li><a href="car/airman.html" target='main'>驾驶员资料</a></li>
         <li style="background: url(images/tree/t_lst.gif) no-repeat;"><a href="car/teammanager.html" target='main'>车队管理</a></li>
    </ul>
            </dd>
            <dt><span>派车管理</span></dt>
            <dd>
                <ul>
         <li><a href="car/cartomanager.html" target='main'>派车单登记</a></li> 
      <li><a href="#" target='main'>派车单查询</a></li> 
         <li style="background: url(images/tree/t_lst.gif) no-repeat;"><a href="#"  target='main'>回车登记</a></li>
     </ul>
            </dd>
            <dt><span>事务管理</span></dt>
            <dd>
                <ul>
     <li><a href="#"  target='main'>投诉管理</a></li>
     <li><a href="#"  target='main'>事故管理</a></li>
     <li><a href="#"  target='main'>表扬管理</a></li>
     <li><a href="#"  target='main'>警情管理</a></li>
     <li><a href="#"  target='main'>车辆保养</a></li>
     <li><a href="#"  target='main'>车辆加油</a></li>
     <li style="background: url(images/tree/t_lst.gif) no-repeat;"><a href="#" target='main'>管理费用</a></li>
       </ul>
            </dd>
            <dt><span>地图管理</span></dt>
            <dd>
                 <ul>
      <li><a href="#" target='main'>鹰眼</a></li>
      <li><a href="#" target='main'>放大</a></li>
      <li><a href="#" target='main'>缩小</a></li>
      <li><a href="#" target='main'>平移</a></li>
      <li><a href="#" target='main'>全图</a></li>
      <li><a href="#" target='main'>测距离</a></li>
      <li><a href="#" target='main'>测面积</a></li>
      <li><a href="#" target='main'>地理信息查询</a></li>
      <li><a href="#" target='main'>参考位置查询</a></li>
      <li><a href="#" target='main'>地图编辑</a></li>
      <li><a href="#" target='main'>清除轨迹</a></li>
      <li><a href="#" target='main'>分色显示</a></li>
      <li><a href="#" target='main'>多窗口监控</a></li>
      <li style="background: url(images/tree/t_lst.gif) no-repeat;"><a href="#" target='main'>导航规划</a></li>
        </ul>
            </dd>
   <dt><span>查询统计</span></dt>
            <dd>
               <ul>
     <li><a href=""   target='main'>最近未上报车辆</a></li>
     <li><a href=""  target='main'>敬请统计查询</a></li>
     <li><a href=""  target='main'>里程统计</a></li>
     <li><a href=""  target='main'>行驶路径查询</a></li>
     <li><a href=""  target='main'>违章统计</a></li>
     <li style="background: url(images/tree/t_lst.gif) no-repeat;"><a href=""  target='main'>日志管理</a></li>
     </ul>
            </dd>
           </dl>
        </div>
        </td>
      </tr>
    </table></td>
  </tr> 
</table>

<script type="text/javascript">
            var a = new Array;
            var treeObj=document.getElementById("webtree").getElementsByTagName("dt");
            for(var i=0;i<treeObj.length;i++){
                treeObj[i].setAttribute('onclick','showObj(' + i + ');');
                treeObj[i].id=i;
                document.getElementById("webtree").getElementsByTagName("dd")[i].style.display="none";
            }
            // 下边的这个循环是给IE用的，上边的setAttribute不认识。还不让我在上边的循环里加。郁闷。
            for(var i=0;i<treeObj.length;i++){
                treeObj[i].onclick=function(){
                    showObj(this.id);
                }
            }
            function showObj(objId){
                var obj=document.getElementById("webtree").getElementsByTagName("dd")[objId];
                if(obj.style.display=="none"){
                    obj.style.display="";
                    document.getElementById("webtree").getElementsByTagName("dt")[objId].style.background="url(images/tree/ico_folder_open.gif) no-repeat 0 1px";
                  //  setSelectedClass(objId);
                }else{
                    obj.style.display="none";
                    document.getElementById("webtree").getElementsByTagName("dt")[objId].style.background="url(images/tree/ico_folder.gif) no-repeat 0 1px";
                }
            }
            function setSelectedClass(objId){
                var obj=document.getElementById("webtree").getElementsByTagName("dt");
                for(var i=0;i<obj.length;i++){
                    var sObj=obj[i].getElementsByTagName("span")[0];
                    if(i==objId){
                        sObj.style.background="#f7f7f7";
                        sObj.style.border="1px solid gray";
                    }else{
                        sObj.style.background="white";
                        sObj.style.border="1px solid white";
                    }

                }
               

            }
</script>
</body>
</html>

分享到：
| Cygwin+Nutch在windows上的配置（搜藏）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    2021-2022计算机二级等级考试试题及答案No.5247.docx

    1. **数据模型**：层次数据模型是最早出现的数据模型之一，它用树形结构来表示实体及其关系。这种模型允许每个节点有零个或多个子节点，通常用于早期的数据库管理系统。 2. **位移运算符**：在C/C++等编程语言中，`...

    2021-2022计算机二级等级考试试题及答案No.17533.docx

    根据给定文件的信息，我们可以总结出一系列与计算机二级等级考试相关的知识点。这些知识点涉及数据库、编程语言、操作系统、网络技术等多个领域。 ### 知识点分析 #### 1. 打印预览与窗体元素 - **知识点**: 在...

    精品专题（2021-2022年收藏）200651.文件、文件系统的概念.doc

    文件目录结构有单级、二级和多级，单级简单但不支持重名，二级解决了命名冲突，多级则更利于文件分类和查找。 优化文件目录检索速度的方法包括使用索引、哈希表等技术，以提高查找效率。同时，目录的组织结构设计也...

    最强大最好用的笔记软件mybase使用指南.docx

    它支持创建树形结构的大纲，允许用户自由组织信息条目。每个条目可以包含富文本(RTF)、附件以及其他条目之间的链接。 #### 二、MyBase 的主要用途 1. **个人知识库**：构建自己的知识体系，方便查阅。 2. **演示...

    Java实战入门[一个资深Java培训老师倾力收藏].pdf

    第十五章“桌面管理系统之JTree应用”通过创建和展示JTree组件，让读者了解如何使用树形结构展示信息，以及如何进行节点的选中和信息获取。 第十六章“数据结构之链表”深入讲解了链表的原理和实现，包括单向链表、...

    精品资料（2021-2022年收藏）计算机基础试题整理版超级全面.doc

    - **层次结构**、**多用户多任务**、**可移植性**、**网络功能**和**树形文件系统**。 **办公自动化软件应用**： - **OA系统**：包括设备、软件和人员。 **程序设计**： - **步骤**：问题分析、解决方案确定、算法...

    分享6个国内优秀Java后台管理框架的开源项目,建议收藏!.docx

    - 树形结构生成 - **优点**: - 提高开发效率 - 保证代码一致性 - 减少出错概率 ### 知识点四：实际应用案例分析 #### 4.1 ThinkGem/JeeSite案例分析 - **应用场景**: 适用于企业信息化建设，如人事管理系统、...

    黄金投资高手.pptx

    - 用户需在黄金交易二级系统营业网点完成开户，获得客户号和初始密码，通常初始密码为证件号码后六位，字母用数字"0"替代。 - 下载并安装交易客户端，首次登录时需修改密码，建议设置较为复杂的密码，避免过于简单...

    vc++ 开发实例源码包

    内部包含：mp3播放器Lrc歌词同步源程序代码分析、mp3播放器+支持歌词同步显示哦、简单音乐播放器。 mfc 解码 视频音频解码部分。 MFC_MultiSender_OVER 文件传送，多文件（超大文件）传送功能的实现，含文档。 ...

    vc++ 应用源码包_1

    实例简单，有用户登录、传输文件、视频、画质调节、禁音检测、回音消除、自动增益、噪音抑制、视频控制等、 VC++搜索指定文件夹中的文件 VC++文件分割、合并工具 自绘了Button、CProgressCtrl、CAutoFont。主要...

    vc++ 应用源码包_2

    实例简单，有用户登录、传输文件、视频、画质调节、禁音检测、回音消除、自动增益、噪音抑制、视频控制等、 VC++搜索指定文件夹中的文件 VC++文件分割、合并工具 自绘了Button、CProgressCtrl、CAutoFont。主要...

    vc++ 应用源码包_6

    实例简单，有用户登录、传输文件、视频、画质调节、禁音检测、回音消除、自动增益、噪音抑制、视频控制等、 VC++搜索指定文件夹中的文件 VC++文件分割、合并工具 自绘了Button、CProgressCtrl、CAutoFont。主要...

    vc++ 应用源码包_5

    实例简单，有用户登录、传输文件、视频、画质调节、禁音检测、回音消除、自动增益、噪音抑制、视频控制等、 VC++搜索指定文件夹中的文件 VC++文件分割、合并工具 自绘了Button、CProgressCtrl、CAutoFont。主要...

    vc++ 应用源码包_3

    实例简单，有用户登录、传输文件、视频、画质调节、禁音检测、回音消除、自动增益、噪音抑制、视频控制等、 VC++搜索指定文件夹中的文件 VC++文件分割、合并工具 自绘了Button、CProgressCtrl、CAutoFont。主要...

    最好的asp CMS系统科讯CMSV7.0全功能SQL商业版，KesionCMS V7.0最新商业全能版-免费下载

    30、多种导航菜单管理（普通导航菜单，顶部菜单，树形菜单），可根据网站需要自行选择导航方式，更加方便。 31、后台操作日志管理，完整记录所有后台操作，可通过日志查出非法操作记录提供证据。 32、保存远程图片...

    C#编程经验技巧宝典

    43 &lt;br&gt;0061　树的实现　44 &lt;br&gt;3.2　排序　48 &lt;br&gt;0062　如何实现选择排序算法　48 &lt;br&gt;0063　如何实现冒泡排序算法　49 &lt;br&gt;0064　如何实现快速排序算法　50 &lt;br&gt;0065　如何实现插入排序算法　...

    易语言 茶凉专用模块

    本模块可以编程更简单，仅仅用核心支持库编写。 @备注: 官方论坛：http://bbs.clrje.cn/ 官方QQ群：92716369 ------------------------ -------------------------- ------------------------------ .版本 2 .子...

Magicbox
Global site tag (gtag.js) - Google Analytics