js实现树形结构实例

最新推荐文章于 2023-02-10 17:15:23 发布

林深不见鹿ee

最新推荐文章于 2023-02-10 17:15:23 发布

阅读量5.4k

点赞数

分类专栏： HTML 文章标签： js实现树形结构实例

本文链接：https://blog.csdn.net/linshenshijianlu/article/details/77131132

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>树形菜单实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="JavaScript" type="text/JavaScript">
function showhide_obj(obj,icon)
{
obj=document.getElementById(obj);
icon=document.getElementById(icon);
 if (obj.style.display=="none") 
  { 
        //指定文档中的对象为div,仅适用于IE;   
        div_list = document.getElementsByTagName("div");
        for (i=0; i< div_list.length;i ++)
        {
          thisDiv = div_list[i]; 
           if(thisDiv.id.indexOf("title")!=-1)//当文档div中的id含有list时,与charAt类似;
           {
            //循环把所有菜单链接都隐躲起来
           thisDiv.style.display="none";
           icon.innerHTML = "+";
           }
        } 
   myfont=document.getElementsByTagName("font");
   for(i=0;i<myfont.length;i++)
    {
    thisfont = myfont[i];
   }
    icon.innerHTML="-";
    obj.style.display=""; //只显示当前链接
}
 else
  {
  //当前对象是打开的，就封闭它;
   icon.innerHTML="+";
   obj.style.display="none";
   }
 }
function show_this(obj)
{
    obj=document.getElementById(obj);
    if (obj.id==obj.id) 
     {
       blinkicon=document.getElementsByTagName("font");
       for(x=0;x<blinkicon.length;x++)
        {
           if( blinkicon[x].id.indexOf("select")!=-1 && obj.id!=obj )
            {
               blinkicon[x].innerHTML=" ";
            }
        }
          obj.innerHTML=">"; 
     }
     else
     {
           obj.innerHTML=" ";
     }
}
</script>
<style type="text/css">
span{ width:100px;height:150px;margin-left:20px;}
font{font-weight:bold;}
body,td{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:15px;color:#000000;padding-top:0px;padding-left:95px;}
div{cursor:default;border-top:1px solid gray ; border-left:1px solid white;border-right:1px solid gray;background-color:rgb(102,203,124);width:200px;}
pre{background-color:rgb(125,111,111); border:1px solid gray;color:blue;font-family:verdana;Arial;padding:50px;}
</style>
	<script id="jquery_182" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
	<script id="jqueryplugins1_jquery_cookie_13" type="text/javascript" class="library" src="/js/sandbox/jquery-plugins/jquery.cookie-1.3.js"></script>
</head>
<body>
<div style="line-height:25px;" onClick="showhide_obj('title1','icon1')"><font id='icon1'>+</font>网站管理</div>
<div id="title1" style="background-color:#fffff3;line-height:22px;display:none;">
<span id="menu1_1" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor=''" οnclick="show_this('select1_1')"><font id='select1_1'></font>
<a href="/" target="_blank">技术支持</a></span><br/>
<span id="menu1_2"  onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor=''" οnclick="show_this('select1_2')"><font id='select1_2'></font><a href="/" target="_blank">模板无忧</a></span><br/>
<span id="menu1_3"  onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor=''" οnclick="show_this('select1_3')"><font id='select1_3'></font><a href="/" target="_blank">网页殊效</a></span><br/>
</div>
<div style="line-height:25px;" onClick="showhide_obj('title2','icon2')"><font id='icon2'>+</font>搜索类</div>
<div id="title2" style="background-color:#fffff3;line-height:22px;display:none;">
<span id="menu2_1"  onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor=''" οnclick="show_this('select2_1')"><font id='select2_1'></font><a href="http://www.baidu.com" target="frmMain">百度</a></span><br/>
<span id="menu2_2"   onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor=''" οnclick="show_this('select2_2')"><font id='select2_2'></font><a href="http://www.google.com" target="frmMain">谷歌</a></span><br/>
<span id="menu2_3"   onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor=''" οnclick="show_this('select2_3')"><font id='select2_3'></font><a href="http://www.yahoo.com.cn" target="frmMain">雅虎</a></span><br/>
</div>
<div style="line-height:25px;" onClick="showhide_obj('title3','icon3')"><font id='icon3'>+</font>音乐类</div>
<div id="title3" style="background-color:#fffff3;line-height:22px;display:none;">
<span id=menu3_1 οnclick="show_this('select3_1')"><font id='select3_1'></font>我的收躲</span><br />
<span id=menu3_2 οnclick="show_this('select3_2')"><font id='select3_2'></font>我的音乐</span><br />
<span id=menu3_3 οnclick="show_this('select3_3')"><font id='select3_3'></font>我的主页</span><br />
</div>
<div style="line-height:25px;" onClick="showhide_obj('title4','icon4')"><font id='icon4'>+</font>聊天类</div>
<div id="title4" style="background-color:#fffff3;line-height:22px;display:none;">
<span id=menu4_1 οnclick="show_this('select4_1')"><font id='select4_1'></font>菜单一</span><br />
<span id=menu4_2 οnclick="show_this('select4_2')"><font id='select4_2'></font>菜单二</span><br />
<span id=menu4_3 οnclick="show_this('select4_3')"><font id='select4_3'></font>菜单三</span><br />
</div>
</body>
</html>

林深不见鹿ee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现树形结构实例

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">树形菜单
复制链接

扫一扫

专栏目录