DOM向けJavaScriptアプリケーション解析(4)_DOM

以下に、皆さんに見ていただけるようにいくつか書きます
1. パラメータ転送メソッドをクリックします

コードをコピー コード

<script> <br>function tab(dom){ <br>var list = document.getElementById("list").getElementsByTagName("li"); >var con = document.getElementById("con").getElementsByTagName("div"); <br>for(var i=0;i<list.length>if(list==dom){ <br>list.className = "on"; <br>con.style.display = "ブロック"; <br>} <br>else{ <br>list.className="";表示 = "なし"; <br>} <br>} <br></script>

;li class="on ">1

• 2


• 4

/div>

222222

333333

"display:none;" >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"; .display = "ブロック"; else{ list.className=""; }

すべての li 要素をループし、渡された dom と同じものを見つけて、そのクラスを on に設定し、対応する div を表示します。その他のすべてについては、className を空に設定し、対応する div を非表示にします。

おそらくそれです。しかし、誰もがこの書き方の欠点に気づいたはずです。それは、各 li が onclick 時間を設定し、それを自分自身に渡さなければならないということです。これは、構造とパフォーマンスの分離に多少違反します。そこで、書き方を変更します
次に、マウスイベントメソッドを直接記述します




コードをコピーします


コードは次のとおりです:

<script> <br>function tab(){ <br>var list = document.getElementById("list").getElementsByTagName("li"); document.getElementById(" con").getElementsByTagName("div"); <br>for(var i = 0;i<list.length class="codetitle">{ <span>list.onclick=function(){ <a style="CURSOR: pointer" data="45679" class="copybut" id="copybut45679" onclick="doCopy('code45679')">for(var i=0;i<list.length>if(list==this){ list.className = "on"; </list.length></a>con.style.display = " block"; </span>} else{ <div class="codebody" id="code45679">list.className=""; <br>con.style.display="none"; <br>} <br>} <br>} <br> } <br>} <br>window.onload=function(){tab();} <br></script>

🎜>
• 1


• 2


• /li>