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

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

;li class="on ">1

111111

설명하겠습니다
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> function tab(){ </a>var list = document.getElementById("list").getElementsByTagName("li") var con = document.getElementById(" con").getElementsByTagName("div"); </div>for(var i = 0;i<list.length;i ) <div class="codebody" id="code45679">{ list.onclick=function(){ for(var i=0;i<list.length;i ){ if(list==this){ list.className = "on" con.style.display = " block"; } else{ list.className=""; con.style.display="none"; } } } } } window.onload=function(){tab();} </script>

🎜>

/li>

/div>

div style="display :none;">444444

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

효과에 대해서는 다음 장에서 계속 설명하겠습니다.