탐색 효과 example_javascript 기술의 js CSS 구현

이 기사의 예에서는 js 및 css를 사용하여 탐색 효과를 얻는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

1. 프로그램 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

  
 
 
 
 
 
 
 
 

 
 

 
 

菜单1

 
  

 
   

 
    
• 菜单选项1-2
 
    
•  
        菜单选项1-2 
       
   
        
  • 菜单选项1-2-1
   
        
  • 菜单选项1-2-2
   
       
   
      
 
    
• 菜单选项1-2
 
    
• 菜单选项1-2
 
   

 
  

 
 

 
 

 
 

菜单2

 
 

 
 

 
 
• 菜单选项2-2
 
 
• 菜单选项2-2 
   
   
   
  • 菜单选项2-2-1
   
   
  • 菜单选项2-2-2 
     
     
     
    • 菜单选项2-2-1
     
     
    • 菜单选项2-2-2 
       
     
     
     
     
   
   
   
   
 
 
• 菜单选项2-2
 
 
• 菜单选项2-2
 
 

 
 

 
 

 
 

 
 

菜单3

 
 

 
 

 
 
• 菜单选项3-2
 
 
• 菜单选项3-2 
   
   
   
  • 菜单选项3-2-1
   
   
  • 菜单选项3-2-2 
     
     
     
    • 菜单选项3-2-1
     
     
    • 菜单选项3-2-2 
       
       
       
      • 菜单选项3-2-1
       
       
      • 菜单选项3-2-2
       
       
       
       
     
     
     
     
   
   
   
   
 
 
• 菜单选项3-2
 
 
• 菜单选项3-2
 
 

 
 

 
 

 

 
 <스크립트 유형="텍스트/자바스크립트"> 
 for(var x = 1; x  { 
 var menuid = document.getElementById("menu" x); 
 menuid.num = x; 
 유형(); 
 } 
 함수 유형()
 { 
 var menuh2 = menuid.getElementsByTagName("h2"); 
 var menuul = menuid.getElementsByTagName("ul"); 
 var menuli = menuul[0].getElementsByTagName("li"); 
 menuh2[0].onmouseover = 표시; 
 menuh2[0].onmouseout = 표시 취소; 
 menuul[0].onmouseover = 표시; 
 menuul[0].onmouseout = 표시 취소; 
 함수 표시() 
 { 
 menuul[0].className = "clearfix typeul 블록"
 } 
 함수 unshow()
 { 
 menuul[0].className = "typeul"
 } 
 for(var i = 0; i < menuli.length; i )
  { 
  menuli[i].num = i; 
  var liul = menuli[i].getElementsByTagName("ul")[0]; 
   if(liul) 
   { 
   typeshow()
   } 
  } 
 함수 typeshow()
 { 
 menuli[i].onmouseover = showul; 
 menuli[i].onmouseout = 표시 취소; 
 } 
 함수 showul()
 { 
 menuli[this.num].getElementsByTagName("ul")[0].className = "블록"; 
 } 
 함수 unshowul()
 { 
 menuli[this.num].getElementsByTagName("ul")[0].className = ""; 
 } 
 }