简单的二级树形(收藏)
<!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>
