찾다

집 >웹 프론트엔드 >JS 튜토리얼 >DOM에 대한 JavaScript 애플리케이션 분석 (4)_DOM

DOM에 대한 JavaScript 애플리케이션 분석 (4)_DOM

WBOY
WBOY원래의
2016-05-16 17:54:10995검색

아래에 모든 사람이 볼 수 있도록 몇 가지를 작성하겠습니다.
1. 매개변수 전송 방법을 클릭합니다.

코드 복사 코드

<script> <br>function tab(dom){ <br>var list = document.getElementById("list").getElementsByTagName("li") <br>var con = document.getElementById("con").getElementsByTagName("div") <br>for(var i=0;i<list.length;i ){ <BR>if(list==dom){ <BR>list.className = "on"; <BR>con.style.display = "block"; <BR>} <BR>else{ <BR>list.className="" <BR>con.style. display="none"; <BR>} <BR>} <BR></script>
;li class="on ">1
  • 2

  • 3




    • 111111

    222222

    333333

    444444



    설명하겠습니다
    var list = document.getElementById("list").getElementsByTagName( "li");
    var con = document.getElementById("con").getElementsByTagName("div");
    말할 필요도 없이 dom 요소를 가져옵니다. 효과를 작성할 때 가장 먼저 해야 할 일은




    코드를 복사하는 것입니다.
    코드는 다음과 같습니다. for (var i=0;iif(list==dom){ list.className = "on"
    con.style .display = "차단";
    }
    else{
    list.className="";
    con.style.display="none"


    모든 li 요소를 반복하여 전달된 dom과 동일한 항목을 찾은 다음 해당 클래스를 on으로 설정하고 해당 div를 표시합니다. 다른 모든 요소에 대해서는 className을 비어 있게 설정하고 해당 div를 숨깁니다.
    아마 그럴 겁니다. 그러나 모두가 이러한 작성 방식의 단점을 발견했을 것입니다. 즉, 각 li는 onclick 시간을 설정하고 이를 자체적으로 전달해야 합니다. 이는 구조와 성능의 분리를 다소 위반합니다. 그래서 작성방식을 변경합니다
    둘째, 마우스 이벤트 메소드를 직접 작성합니다



    코드를 복사합니다

    코드는 다음과 같습니다 : <script> </u>function tab(){ </a>var list = document.getElementById("list").getElementsByTagName("li") </span>var con = document.getElementById(" con").getElementsByTagName("div"); </div>for(var i = 0;i<list.length;i ) <div class="codebody" id="code45679">{ <BR>list.onclick=function(){ <BR>for(var i=0;i<list.length;i ){ <BR>if(list==this){ <BR>list.className = "on" <BR>con.style.display = " block"; <BR>} <BR>else{ <BR>list.className=""; <BR>con.style.display="none"; <BR>} <BR>} <BR>} <BR> } <BR>} <BR>window.onload=function(){tab();} <BR></script>
    🎜>
  • 1

  • 2

  • 3
    • /li>


    /div>
    222222

    333333
    div style="display :none;">444444




    JS에는 onclick과 같은 메소드가 있으므로 간단한 변경만으로 충분합니다. , onmouseover 잠깐만요. 하지만 사용할 때 이 이벤트를 사용해야 하는 모든 요소를 ​​순회해야 합니다. 해당 요소를 클릭하면 this가 전달됩니다. 목록이 첫 번째와 동일한지 여부만 판단하면 됩니다. 이 방법은 동일하며, 다음 작업은 첫 번째 방법
    과 동일합니다. (이렇게 하면 두 방법 모두 비교적 간단한 작성 방법입니다. JS에도 좀 더 고급스럽고 복잡한 작성 방법이 있지만 아이디어는 다음과 같습니다. 사용되는 두 가지 작성 방법은 대부분 동일합니다. )
    그렇습니다. 이미지 전환 효과를 작성하려면 이 방법을 사용하는 것이 좋습니다.

    효과에 대해서는 다음 장에서 계속 설명하겠습니다.
    성명：
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    이전 기사：모방 웨이보 문자 제한 효과 구현 code_javascript 기술다음 기사：모방 웨이보 문자 제한 효과 구현 code_javascript 기술

    관련 기사

    더보기