The complete realization method of JAVASCRIPT+CSS infinite polar classification effect _javascript skill

This paper illustrates the complete realization of JAVASCRIPT+CSS infinite polar classification effect. Share to everyone for your reference, specific as follows:

CSS style:

A {Text-decoration:none} a,a:visited {color: #000; background:inherit;} body {margin:0;padding:20px;font:12px Tahoma,
XXFarEastFont-Sans-serif; DT {font-size:22px;font-weight:bold;margin:0
0 0 15px;} DD {margin:0
0 0 15px;} h4 {Margin:0;padding:0;font-size:18px;text-align:center} p {margin:0;padding:0
0 0 18px;} P a,p a:visited {color: #00f; background:inherit;}/*cnltreemenu start*/. Cnltreemenu img.s {Cursor:pointer;vertical-align:middle}. Cnltreemenu ul {padding:0}. Cnltreemenu li {list-style:none;padding:0}. Closed ul {Display:none}. Child Img.s {Background:none;cursor:default} #CNLTreeMenu1 ul {margin:0
0 0 17px;} #CNLTreeMenu1 img.s {width:20px;height:15px} #CNLTreeMenu1. Opened Img.s {Background:url (skin1/opened.gif) no-repeat 0 0;} #CNLTreeMenu1. Closed img.s {background:url (skin1/closed.gif) no-repeat 0 0;} #CNLTreeMenu1. Child Img.s {background:url (skin1/child.gif) no-repeat 3px 5px;} #CNLTreeMenu2 ul {margin:0
0 0 17px;} #CNLTreeMenu2 img.s {width:17px;height:15px} #CNLTreeMenu2. Opened Img.s {Background:url (skin2/opened.gif) no-repeat 4px 6px;} #CNLTreeMenu2. Closed img.s {background:url (skin2/closed.gif) no-repeat 3px 6px;} #CNLTreeMenu2. Child Img.s {background:url (skin2/child.gif) no-repeat 3px 5px;} #CNLTreeMenu3 ul {margin:0
0 0 17px;} #CNLTreeMenu3 img.s {width:34px;height:18px} #CNLTreeMenu3. Opened Img.s {Background:url (skin3/opened.gif) no-repeat 0 1px;} #CNLTreeMenu3. Closed img.s {background:url (skin3/closed.gif) no-repeat 0 1px;} #CNLTreeMenu3. Child Img.s {background:url (skin3/child.gif) no-repeat 13px 2px.}/*cnltreemenu end*//*temp CSS for View demo*/#CNLTreeM Enu1, #CNLTreeMenu2, #CNLTreeMenu3 {float:left;width:249px;border:1px solid #99BEEF; background: #D2E4FC; color:
inherit;margin:3px;padding:3px;} #CNLTreeMenu1, #CNLTreeMenu2 {padding-bottom:15px;}.
 Viewcode {clear:both;
border:1px solid #FFB900; background: #FFFFCC; color:inherit;margin:3px;padding:3px; }
.

 Viewcode h6 {color: #00f;}

JavaScript code:

function Ob (o) {var o=document.getelementbyid (o)? document.getElementById (o): o;
return o; function Hd (o) {ob (O). style.display= "None"; function Sw (o) {ob (O). style.display= "";} function Excls (o,a,b,n) {VA
 R O=ob (o);
 for (i=0;i<n;i++) {O=o.parentnode;}
o.classname=o.classname==a?b:a;
 function Cnltreemenu (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 = " 

HTML page:

<!--cnltreemenu start:--> <div class= "Cnltreemenu" id= "CNLTreeMenu1" > &LT;H4&GT;CNL tree menu1 

I hope this article will help you with your JavaScript programming.