javascript、CSS、XML动太生成树菜单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
    <Style>
/*    .on
    {
        background:#5eeDBE url(images/menu_head_bg.gif) repeat-x;
        text-decoration:none;
        border: 1px solid #2a4dab;
        font:bold 12px/22px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif;
        
    }*/
    .list{margin:0;padding:0;}
    .list ul
    {
        /*background:#5eeDBE url(images/menu_head_bg.gif) repeat-x;背景样式依次为：颜色，图片路径，横向重复*/
        list-style-type:none;    
        margin:0,0,0,9;
        padding:0;
        padding-left:1px;    
    }
    .list li
    {
        font:bold 12px/22px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif;/*文字样式依次为：粗体 大小/行高 字族*/
        list-style-type:none;
        margin:0;
        padding:0;
        padding-left:12px;
        cursor:hand;
        background:#008080
    }

    A:link {font-size:12px;text-decoration:none;color: #FFFFFF}
    A:visited {font-size:12px;text-decoration:none;color: #FFFFFF}
    A:active {font-size:12px;text-decoration: none;color: ##FFFFFF}
    A:hover {font-size:12px;text-decoration:none;color: #ff00ff;border: 1px solid #2a4dab;/*边框颜色*/ }

    </Style>
    <script language='javascript'>
    function showhide(thisobj,id)
    {
        var obj=document.getElementById(id);
        //alert(thisobj.previousSibling.previousSibling.getAttribute("src"));
        if(obj.style.display=="")
        {
            obj.style.display="none";
            //thisobj.innerText="+"+thisobj.innerText.substring(1);
            thisobj.previousSibling.setAttribute("src","C:\\Documents and Settings\\kevin.long\\桌面\\Web\\books_close.gif")
            thisobj.previousSibling.previousSibling.setAttribute("src","C:\\Documents and Settings\\kevin.long\\桌面\\Web\\plus.gif")
        }
        else
        {
            obj.style.display="";
            //thisobj.innerText="-"+thisobj.innerText.substring(1);
            thisobj.previousSibling.setAttribute("src","C:\\Documents and Settings\\kevin.long\\桌面\\Web\\books_open.gif")
            thisobj.previousSibling.previousSibling.setAttribute("src","C:\\Documents and Settings\\kevin.long\\桌面\\Web\\minus.gif")
        }
    }
    function show(thisobj)
    {
        
        alert(thisobj);
        
    }
    </script>
    <script language='javascript'>
    var xmlDoc;
    function CreateXmlObj()
    {
        if(window.ActiveXObject)
        {
        xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
        }
        else
        {
            xmlDoc==document.implementation.createDocument("","",null);
        }
        //xmlDoc.async=false;
        xmlDoc.load("C:\\Documents and Settings\\kevin.long\\桌面\\Tree.xml");
        if(xmlDoc.parseError.errorCode!=0)
        {
            var xmlErr=xmlDoc.parseError;
            alert("出错:"+xmlErr.reason);
        }
    }
    var str="<div class=\"list\" id=\"menu1_child\" title=\"菜单功能区\">";
    function CreateTreeNode(root)
    {
        if(root.hasChildNodes)
        {
            var uid=root.getAttribute("Id")+"-1";
            str+="<ul id=\""+uid+"\">"
            for(var i=0;i<root.childNodes.length;i++)
            {
                var node=root.childNodes[i];
                var id=node.getAttribute("Id");
                var name=node.getAttribute("Name");                                            
                if(node.hasChildNodes)
                {
                    //str+="<li id=\""+id+"\" ><img src=\"C:\\Documents and Settings\\kevin.long\\桌面\\minus.gif\"/><SPAN onclick=\"showhide(this,'"+id+"-1')\"><a >-"+name+"</a></SPAN>"
                    str+="<li id=\""+id+"\"><img src=\"C:\\Documents and Settings\\kevin.long\\桌面\\Web\\minus.gif\"/><img src=\"C:\\Documents and Settings\\kevin.long\\桌面\\Web\\books_open.gif\"/><SPAN onclick=\"showhide(this,'"+id+"-1')\"><a >"+name+"</a></SPAN>"

                    CreateTreeNode(node)
                    str+="</li>";
                }
                else
                {
                    str+="<li id=\""+id+"\" style=\"margin-left:18px;\" ><img src=\"C:\\Documents and Settings\\kevin.long\\桌面\\Web\\leaf.gif\"/><a href=\"javascript:\">"+name+"</a></li>"
                }                
            }
            str+="</ul>"
        //    alert(root.childNodes.length);
        }
    }
    function showAll()
    {
        
    }
    function closeAll()
    {}
    function Test()
    {
        CreateXmlObj();
        //alert(xmlDoc.documentElement.firstChild.getAttribute("Name"));
        var root=xmlDoc.documentElement;
        CreateTreeNode(root);
        str+="</div>";
        //alert(str);
        document.getElementById("codeText").value=str
        idmenu.innerHTML=str;
    }
    </script>
</head>

<body>
<input type="button" onclick="showAll()" value="全部展開">
<input type="button" onclick="closeAll()" value="全部關閉">
<input type="button" onclick="Test()" value="测试">
<input id="codeText" type="text" value="">
<div id="idmenu">555</div>
</body>
</html>
Tree.xml
<?xml version="1.0" encoding="UTF-8"?>
<Root>
 <Menu Id="000" Name="樹菜單"> 
  <Menu Id="001" Name="用户功能" >  
      <Menu Id="002" Name="注册信息" >
              <Menu Id="025" Name="文章管理" >      
                  <Menu Id="021" Name="文章分类" />
                  <Menu Id="022" Name="添加文章" />
                  <Menu Id="023" Name="评论管理" />
                  <Menu Id="024" Name="添加图片" />
              </Menu>
              <Menu Id="026" Name="可可豆" >
                  <Menu Id="021" Name="文章分类" />
                  <Menu Id="022" Name="添加文章" />
                  <Menu Id="023" Name="评论管理" />
                  <Menu Id="024" Name="添加图片" />
              </Menu>  
              <Menu Id="027" Name="凤飞飞" />
              <Menu Id="028" Name="万维网" />
    </Menu>
      <Menu Id="007" Name="系统设置" />  
      <Menu Id="008" Name="环境变量" />
      <Menu Id="009" Name="执行SQL" />
      <Menu Id="010" Name="友情链接" />
    <Menu Id="016" Name="文章管理" >      
              <Menu Id="017" Name="文章分类" />
              <Menu Id="018" Name="添加文章" />
              <Menu Id="019" Name="评论管理" />
              <Menu Id="020" Name="添加图片" />
    </Menu>
      <Menu Id="003" Name="我的文档" />
      <Menu Id="004" Name="回收站" />
      <Menu Id="005" Name="控制面板" />      
  </Menu>
  
  <Menu Id="007" Name="系统设置" >  
      <Menu Id="008" Name="环境变量" />
      <Menu Id="009" Name="执行SQL" />
      <Menu Id="010" Name="友情链接" />
      <Menu Id="011" Name="文章管理" >      
          <Menu Id="012" Name="文章分类" />
          <Menu Id="013" Name="添加文章" />
          <Menu Id="014" Name="评论管理" />
          <Menu Id="015" Name="添加图片" />
      </Menu>
  </Menu>
  <Menu Name="广东省" Id="440000">
    <Menu Name="广州市" Id="440100" />
    <Menu Name="韶关市" Id="440200" />
    <Menu Name="深圳市" Id="440300" />
    <Menu Name="珠海市" Id="440400" />
    <Menu Name="汕头市" Id="440500" />
    <Menu Name="佛山市" Id="440600" />
    <Menu Name="江门市" Id="440700" />
    <Menu Name="湛江市" Id="440800" />
    <Menu Name="茂名市" Id="440900" />
    <Menu Name="肇庆市" Id="441200" />
    <Menu Name="惠州市" Id="441300" />
    <Menu Name="梅州市" Id="441400" />
    <Menu Name="汕尾市" Id="441500" />
    <Menu Name="河源市" Id="441600" />
    <Menu Name="阳江市" Id="441700" />
    <Menu Name="清远市" Id="441800" />
    <Menu Name="东莞市" Id="441900" />
    <Menu Name="中山市" Id="442000" />
    <Menu Name="潮州市" Id="445100" />
    <Menu Name="揭阳市" Id="445200" />
    <Menu Name="云浮市" Id="445300" />
  </Menu>
  <Menu Name="广西壮族自治区" Id="450000">
    <Menu Name="南宁市" Id="450100" />
    <Menu Name="柳州市" Id="450200" />
    <Menu Name="桂林市" Id="450300" />
    <Menu Name="梧州市" Id="450400" />
    <Menu Name="北海市" Id="450500" />
    <Menu Name="防城港市" Id="450600" />
    <Menu Name="钦州市" Id="450700" />
    <Menu Name="贵港市" Id="450800" />
    <Menu Name="玉林市" Id="450900" />
    <Menu Name="百色市" Id="451000" />
    <Menu Name="贺州市" Id="451100" />
    <Menu Name="河池市" Id="451200" />
    <Menu Name="来宾市" Id="451300" />
    <Menu Name="崇左市" Id="451400" />
  </Menu>
  <Menu Name="海南省" Id="460000">
    <Menu Name="海口市" Id="460100" />
    <Menu Name="三亚市" Id="460200" />
    <Menu Name="省直辖县级行政单位" Id="469000" />
  </Menu>
  <Menu Name="重庆市" Id="500000">
    <Menu Name="市辖区" Id="500100" />
    <Menu Name="县" Id="500200" />
    <Menu Name="市" Id="500300" />
  </Menu>
  <Menu Name="四川省" Id="510000">
    <Menu Name="成都市" Id="510100" />
    <Menu Name="自贡市" Id="510300" />
    <Menu Name="攀枝花市" Id="510400" />
    <Menu Name="泸州市" Id="510500" />
    <Menu Name="德阳市" Id="510600" />
    <Menu Name="绵阳市" Id="510700" />
    <Menu Name="广元市" Id="510800" />
    <Menu Name="遂宁市" Id="510900" />
    <Menu Name="内江市" Id="511000" />
    <Menu Name="乐山市" Id="511100" />
    <Menu Name="南充市" Id="511300" />
    <Menu Name="眉山市" Id="511400" />
    <Menu Name="宜宾市" Id="511500" />
    <Menu Name="广安市" Id="511600" />
    <Menu Name="达州市" Id="511700" />
    <Menu Name="雅安市" Id="511800" />
    <Menu Name="巴中市" Id="511900" />
    <Menu Name="资阳市" Id="512000" />
    <Menu Name="阿坝藏族羌族自治州" Id="513200" />
    <Menu Name="甘孜藏族自治州" Id="513300" />
    <Menu Name="凉山彝族自治州" Id="513400" />
  </Menu>
  </Menu> 
</Root>
posted @   龍的傳人  阅读(1965)  评论(2)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
点击右上角即可分享
微信分享提示