<!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>
分享到：
相关推荐
二级树形菜单示例：CSS+TreeMenu 二级树形菜单示例：CSS+TreeMenu
ASP+ACCESS动态二级树形产品导航菜单(黄生原创作品)
js+css简单后台二级树形菜单demo示例
二级树形菜单示例：CSS TreeMenu
NULL 博文链接：https://rebecca.iteye.com/blog/1173467
二级菜单 树形菜单 基于jqurey的树形菜单
javascript二级树形菜单，仿照windows的菜单制作的
二级树形菜单，二级树形菜单，只有两级哦，真的只有两级哦
二级菜单选择树形展开，菜单选择，树形结构。
一个很好用的js树形菜单
三级树形栏目
在懒人建站网站上面找到的二级的菜单导航样式，适合制作网页时应用
基于jquery代码的树形菜单，适用于系统树形下拉菜单。
多种树形穿梭框集合 满足你对于所有树形穿梭框的需求 vue方式启动即可
二级导航树形下啦，可以改变下啦的背景鼠标附上去变化颜色
微信小程序 树形菜单组件 v2 需属性传值 listData（树形菜单数据） listData数据格式:[{title:'A层级菜单1',children:[]},{title:'A层级菜单2',children:[]}] 使用： <wxTreeList listData="{{listData}}"></...
树形的二级分类，刷新后重定向过来都无任何变化。用了cookie记住了。
http://blog.csdn.net/u014172271/article/details/79438214的源代码工程
QML 中没有直接提供类似 android 的ExpandableListView二级列表控件，treeView，但是用 treeView 实在是有些不方便，并且达不到想要的效果，所以干脆用 ListView 来扩展一个。