Complete implementation of JavaScript + CSS infinitus classification effect _ javascript skills

This article mainly introduces the complete implementation of JavaScript + CSS infinitus classification effect, involving JavaScript techniques for page Element Node traversal and dynamic operation, for more information about how to implement JavaScript + CSS infinitus classification, see the following example. We will share this with you for your reference. The details are as follows:

CSS style:

A {text-decoration: none;} a, a: visited {color: #000; background: inherit;} body {margin: 0; padding: 20px; font: 12px tahoma,, 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, 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 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 */# CNLTreeMenu1, # CNLTreeMenu2, # CNLTreeMenu3 {float: left; width: 249px; border: 1px solid #99 BEEF; 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) {var o = Ob (o); for (I = 0; I
 
  

  
HTML page:
  

  
   
CNL Tree Menu1
Show all hide all
   
  
 
    
   
JB51.Net 
    
 
     
Technical Zone 
      
 
       
Web technology 
        
 
         
JavaScript
  
         
HTML/XHTML/CSS
 
         
Ajax
 
         
Webpage creation tools
 
         
Design/graphics
 
         
Flash/multimedia
 
         
VML/Web3D
 
        
  
       
Web Programming 
        
 
         
Java
  
         
. Net
 
         
ASP/VBScript
 
         
PHP
 
         
Perl/Python
 
         
Web Integration/open source
 
        
  
       
Database 
        
 
         
Access/SQLServer
  
         
MySQL/PostgreSQL
 
         
Oracle/DB2/Sybase
 
        
  
       
Server 
        
 
         
Windows/IIS
  
         
Unix/Linux/Apache
 
         
Application Server
 
        
  
      
  
     
Level 2 Directory 
      
 
       
Level 3 directory 
        
 
         
Level 4 directory 
          
 
           
Level 5 directory 
            
 
             
 
              
 
               
Level n directory 
                
 
                 
Leaf node 1
  
                 
Leaf node 2
 
                 
Leaf node 3
 
                
  
              
  
            
  
          
  
        
  
      
  
     
Level 2 Directory 
      
 
       
Level 3 directory 
        
 
         
Level 4 directory 
          
 
           
Level 5 directory 
            
 
             
 
              
 
               
Level n directory 
                
 
                 
Leaf node 1
  
                 
Leaf node 2
 
                 
Leaf node 3
 
                
  
              
  
            
  
          
  
        
  
      
  
    
    
   
  

   
   
  

  
I hope this article will help you design JavaScript programs.