선택 드롭다운 메뉴 control_javascript 기술을 시뮬레이션하는 js 코드

WBOY
풀어 주다: 2016-05-16 17:34:27
원래의
916명이 탐색했습니다.
코드 복사 코드는 다음과 같습니다.


 
 
 
 
 js模拟select
 

   
 
  

          

            

                

select选择


                
                

                        
  • jq的select模拟1

  •                     
  • jq的select模拟2

  •                     
  • jq的select模拟3

  •                 

            

            

                

select选择2


                
                

                        
  • jq的select模拟11

  •                     
  • jq的select模拟22

  •                     
  • jq的select模拟31

  •                 

            


        

 

   <script><br><br>     window.onload=function(){<br>     var oflink = document.getElementById('sel');<br>     var aDt = oflink.getElementsByTagName('dt' );<br>     var aUl = oflink.getElementsByTagName('ul');<br>     var aH3= oflink.getElementsByTagName('h3');<br>     for(var i=0;i<aDt.length;i ) {<br>         aDt[i].index = i;<br>         aDt[i].onclick = function(ev){<br>             var ev = ev || window.event;<br>             var This = this;<br>             for(var i=0;i<aUl.length;i ){<br>                aUl[i].style.display = 'none';<br> }<br>             aUl[this.index].style.display = 'block';<br>             document.onclick = function(){<br>                aUl[This.index].style.display = 'none';<br>            };<br>             ev.cancelBubble = true;<br><br>         };<br>     }<br>     for(var i=0;i<aUl.length;i ){<br><br>         aUl [i].index = i;<br><br>         (function(ul){<br><br>             var iLi = ul.getElementsByTagName('li');<br><br>             for(var i=0 ;i<iLi.length;i ){<br>                iLi[i].onmouseover = function(){<br>                   this.className = 'hover';<br>               };<br>                 iLi[i].onmouseout = function(){<br>                    this.className = '';<br>                };<br>               iLi[i].onclick = function(ev){<br>                   var ev = ev || aH3[this.parentNode.index].innerHTML = this.innerHTML;<br>                    ev.cancelBubble = true;<br>                  this.parentNode.style.display = 'none';<br>               };<br>             }<br><br>        })(aUl[i]);<br>     }<br><br> }<br>   </script>

 
 
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿