JavaScript+CSS无限极分类效果完整实现方法
本文实例讲述了JavaScript+CSS无限极分类效果完整实现方法。分享给大家供大家参考,具体如下:
CSS样式:
a{text-decoration:none;} a,a:visited{color:#000;background:inherit;} body{margin:0;padding:20px;font:12pxtahoma,宋体,sans-serif;} dt{font-size:22px;font-weight:bold;margin:00015px;} dd{margin:00015px;} h4{margin:0;padding:0;font-size:18px;text-align:center;} p{margin:0;padding:00018px;} pa,pa:visited{color:#00f;background:inherit;} /*CNLTreeMenuStart*/ .CNLTreeMenuimg.s{cursor:pointer;vertical-align:middle;} .CNLTreeMenuul{padding:0;} .CNLTreeMenuli{list-style:none;padding:0;} .Closedul{display:none;} .Childimg.s{background:none;cursor:default;} #CNLTreeMenu1ul{margin:00017px;} #CNLTreeMenu1img.s{width:20px;height:15px;} #CNLTreeMenu1.Openedimg.s{background:url(skin1/opened.gif)no-repeat00;} #CNLTreeMenu1.Closedimg.s{background:url(skin1/closed.gif)no-repeat00;} #CNLTreeMenu1.Childimg.s{background:url(skin1/child.gif)no-repeat3px5px;} #CNLTreeMenu2ul{margin:00017px;} #CNLTreeMenu2img.s{width:17px;height:15px;} #CNLTreeMenu2.Openedimg.s{background:url(skin2/opened.gif)no-repeat4px6px;} #CNLTreeMenu2.Closedimg.s{background:url(skin2/closed.gif)no-repeat3px6px;} #CNLTreeMenu2.Childimg.s{background:url(skin2/child.gif)no-repeat3px5px;} #CNLTreeMenu3ul{margin:00017px;} #CNLTreeMenu3img.s{width:34px;height:18px;} #CNLTreeMenu3.Openedimg.s{background:url(skin3/opened.gif)no-repeat01px;} #CNLTreeMenu3.Closedimg.s{background:url(skin3/closed.gif)no-repeat01px;} #CNLTreeMenu3.Childimg.s{background:url(skin3/child.gif)no-repeat13px2px;} /*CNLTreeMenuEnd*/ /*TempCSSforViewDemo*/ #CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3{float:left;width:249px;border:1pxsolid#99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;} #CNLTreeMenu1,#CNLTreeMenu2{padding-bottom:15px;} .ViewCode{ clear:both; border:1pxsolid#FFB900;background:#FFFFCC;color:inherit;margin:3px;padding:3px; } .ViewCodeh6{color:#00f;}
JavaScript代码:
functionOb(o){ varo=document.getElementById(o)?document.getElementById(o):o; returno; } functionHd(o){ Ob(o).style.display="none"; } functionSw(o){ Ob(o).style.display=""; } functionExCls(o,a,b,n){ varo=Ob(o); for(i=0;i<n;i++){o=o.parentNode;} o.className=o.className==a?b:a; } functionCNLTreeMenu(id,TagName0){ this.id=id; this.TagName0=TagName0==""?"li":TagName0; this.AllNodes=Ob(this.id).getElementsByTagName(TagName0); this.InitCss=function(ClassName0,ClassName1,ClassName2,ImgUrl){ this.ClassName0=ClassName0; this.ClassName1=ClassName1; this.ClassName2=ClassName2; this.ImgUrl=ImgUrl||"css/s.gif"; this.ImgBlankA="<imgsrc=\""+this.ImgUrl+"\"class=\"s\"onclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\"alt=\"展开/折叠\"/>"; this.ImgBlankB="<imgsrc=\""+this.ImgUrl+"\"class=\"s\"/>"; for(i=0;i<this.AllNodes.length;i++){ this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:""; this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes[i].innerHTML; } } this.SetNodes=function(n){ varsClsName=n==0?this.ClassName0:this.ClassName1; for(i=0;i<this.AllNodes.length;i++){ this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName; } } }
HTML页面:
<!--CNLTreeMenuStart:--> <divclass="CNLTreeMenu"id="CNLTreeMenu1"> <h4>CNLTreeMenu1</h4> <p><aid="AllOpen_1"href="#"onclick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展开</a><aid="AllClose_1"href="#"onclick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');"style="display:none;">全部折叠</a></p> <ul> <liclass="Opened"><ahref="https://www.nhooo.com">JB51.Net</a> <ul> <li><ahref="#1">技术区</a> <ul> <li><ahref="#">网页技术</a> <ul> <liclass="Child"><ahref="#">JavaScript</a></li><!--ChildNode--> <liclass="Child"><ahref="#">HTML/XHTML/CSS</a></li> <liclass="Child"><ahref="#">Ajax</a></li> <liclass="Child"><ahref="#">网页制作工具</a></li> <liclass="Child"><ahref="#">设计/图形</a></li> <liclass="Child"><ahref="#">Flash/多媒体</a></li> <liclass="Child"><ahref="#">VML/Web3D</a></li> </ul></li><!--SubNode3--> <li><ahref="#">Web编程</a> <ul> <liclass="Child"><ahref="#">Java</a></li><!--ChildNode--> <liclass="Child"><ahref="#">.Net</a></li> <liclass="Child"><ahref="#">ASP/VBScript</a></li> <liclass="Child"><ahref="#">PHP</a></li> <liclass="Child"><ahref="#">Perl/Python</a></li> <liclass="Child"><ahref="#">Web综合/开源</a></li> </ul></li><!--SubNode3--> <li><ahref="#">数据库</a> <ul> <liclass="Child"><ahref="#">Access/SQLServer</a></li><!--ChildNode--> <liclass="Child"><ahref="#">MySQL/PostgreSQL</a></li> <liclass="Child"><ahref="#">Oracle/DB2/Sybase</a></li> </ul></li><!--SubNode3--> <li><ahref="#">服务器</a> <ul> <liclass="Child"><ahref="#">Windows/IIS</a></li><!--ChildNode--> <liclass="Child"><ahref="#">Unix/Linux/Apache</a></li> <liclass="Child"><ahref="#">应用服务器</a></li> </ul></li><!--SubNode3--> </ul></li><!--SubNode2--> <li><ahref="#1">二级目录</a> <ul> <li><ahref="#">三级目录</a> <ul> <li><ahref="#">四级目录</a> <ul> <li><ahref="#">五级目录</a> <ul> <li><ahref="#"></a> <ul> <li><ahref="#">第n级目录</a> <ul> <liclass="Child"><ahref="#">叶结点1</a></li><!--ChildNode--> <liclass="Child"><ahref="#">叶结点2</a></li> <liclass="Child"><ahref="#">叶结点3</a></li> </ul></li><!--SubNoden--> </ul></li><!--SubNode6--> </ul></li><!--SubNode5--> </ul></li><!--SubNode4--> </ul></li><!--SubNode3--> </ul></li><!--SubNode2--> <li><ahref="#1">二级目录</a> <ul> <li><ahref="#">三级目录</a> <ul> <li><ahref="#">四级目录</a> <ul> <li><ahref="#">五级目录</a> <ul> <li><ahref="#"></a> <ul> <li><ahref="#">第n级目录</a> <ul> <liclass="Child"><ahref="#">叶结点1</a></li><!--ChildNode--> <liclass="Child"><ahref="#">叶结点2</a></li> <liclass="Child"><ahref="#">叶结点3</a></li> </ul></li><!--SubNoden--> </ul></li><!--SubNode6--> </ul></li><!--SubNode5--> </ul></li><!--SubNode4--> </ul></li><!--SubNode3--> </ul></li><!--SubNode2--> </ul></li><!--SubNode1--> </ul> </div><!--CNLTreeMenu--> <!--CNLTreeMenu1End!-->
希望本文所述对大家JavaScript程序设计有所帮助。