<%@ 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>
js实现树形结构实例
最新推荐文章于 2023-02-10 17:15:23 发布