display tree

<img src="http://dl.iteye.com/upload/picture/pic/51639/26bce1a2-e039-3723-92a8-9f77d572d6e7.jpg" alt="" width="350" height="501"> <!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>网页教学网无限级树型菜单演示</title> <script type="text/javascript"> //more javascript from http://www.webjx.com var temp, temp2, cookiearray, cookiearray2, cookiecount; function initiate(){ cookiecount=0; if(document.cookie){ cookiearray=document.cookie.split(";"); cookiearray2=new array(); for(i in cookiearray){ cookiearray2[cookiearray[i].split("=")[0].replace(/ /g,"")]=cookiearray[i].split("=")[1].replace(/ /g,""); } } cookiearray=(document.cookie.indexof("state=")>=0)?cookiearray2["state"].split(","):new array(); temp=document.getelementbyid("containerul"); for(var o=0;o<temp.getelementsbytagname("li").length;o++){ if(temp.getelementsbytagname("li")[o].getelementsbytagname("ul").length>0){ temp2 = document.createelement("span"); temp2.classname = "symbols"; temp2.style.backgroundimage = (cookiearray.length>0)?((cookiearray[cookiecount]=="true")?"url(tree/minus.png)":"url(tree/plus.png)"):"url(tree/plus.png)"; temp2.onclick=function(){ showhide(this.parentnode); writecookie(); } temp.getelementsbytagname("li")[o].insertbefore(temp2,temp.getelementsbytagname("li")[o].firstchild) temp.getelementsbytagname("li")[o].getelementsbytagname("ul")[0].style.display = "none"; if(cookiearray[cookiecount]=="true"){ showhide(temp.getelementsbytagname("li")[o]); } cookiecount++; } else{ temp2 = document.createelement("span"); temp2.classname = "symbols"; temp2.style.backgroundimage = "url(tree/page.png)"; temp.getelementsbytagname("li")[o].insertbefore(temp2,temp.getelementsbytagname("li")[o].firstchild); } } } function showhide(el){ el.getelementsbytagname("ul")[0].style.display=(el.getelementsbytagname("ul")[0].style.display=="block")?"none":"block"; el.getelementsbytagname("span")[0].style.backgroundimage=(el.getelementsbytagname("ul")[0].style.display=="block")?"url(tree/minus.png)":"url(tree/plus.png)"; } function writecookie(){ // runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie. cookiearray=new array() for(var q=0;q<temp.getelementsbytagname("li").length;q++){ if(temp.getelementsbytagname("li")[q].childnodes.length>0){ if(temp.getelementsbytagname("li")[q].childnodes[0].nodename=="span" && temp.getelementsbytagname("li")[q].getelementsbytagname("ul").length>0){ cookiearray[cookiearray.length]=(temp.getelementsbytagname("li")[q].getelementsbytagname("ul")[0].style.display=="block"); } } } document.cookie="state="+cookiearray.join(",")+";expires="+new date(new date().gettime() + 365*24*60*60*1000).togmtstring(); } </script> <style type="text/css"></style> </head> <body> <ul id="containerul"> <li> 网页教学网 <ul> <li> <a href="http://www.webjx.com/htmldata/sort/2.html">建站指南</a> </li> <li> <a href="http://www.webjx.com/htmldata/sort/3.html">网页制作</a> </li> <li> <a href="http://www.webjx.com/htmldata/sort/4.html">动画制作</a> </li> </ul> </li> <li> 网络编程 <ul> <li> <a href="http://www.webjx.com/htmldata/sort/24.html">asp.net</a> </li> <li> <a href="http://www.webjx.com/htmldata/sort/25.html">asp</a> <ul> <li> <a href="http://www.webjx.com/htmldata/sort/26.html">php</a> </li> <li> <a href="http://www.webjx.com/htmldata/sort/28.html">数据库</a> </li> <li> <a href="http://www.webjx.com/htmldata/sort/29.html">cgi</a> </li> <li> <a href="http://www.webjx.com/htmldata/sort/29.html">java网络编程</a> <ul> <li> <a href="http://www.webjx.com/htmldata/sort/26.html">jsp</a> </li> <li> <a href="http://www.webjx.com/htmldata/sort/28.html">j2ee</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> <script type="text/javascript"> initiate(); // this must be placed immediately after the menu in order to format it properly. </script> <h3>树形菜单</h3> 说明：一个很容易制作树形菜单，你可以无限级的添加下级菜单，菜单是通过列表方式写成的 </body> </html>

猜你喜欢