下面我就写几个给大家看看 一，点击传参方法 复制代码 代码如下: <script> function tab(dom){ var list = document.getElementById("list").getElementsByTagName("li"); var con = document.getElementById("con").getElementsByTagName("div"); for(var i=0;i<list.length;i++){ if(list==dom){ list.className = "on"; con.style.display = "block"; } else{ list.className=""; con.style.display="none"; } } } </script> <div id="list"> <ul> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div id="con"> <div style="display:block;">111111</div> <div style="display:none;">222222</div> <div style="display:none;">333333</div> <div style="display:none;">444444</div> </div> 我解释一下 var list = document.getElementById("list").getElementsByTagName("li"); var con = document.getElementById("con").getElementsByTagName("div"); 获取dom元素，这个不用说了吧。写什么效果第一件事都是获取元素 复制代码 代码如下: for(var i=0;i<list.length;i++){ if(list==dom){ list.className = "on"; con.style.display = "block"; } else{ list.className=""; con.style.display="none"; } 遍历一下所有的li元素，找到和传进来的dom一样的东西，然后把他的class设置为on,并且把相对应的div给显示出来，其他的就全部把className设置为空，并且把对应的div给隐藏。 大概就是这样。但是大家肯定就都发现了这样的写法的缺点，就是每个li都要设置一个onclick时间传入它自己。这样有点违反了结构与表现相分离的道理。所以我们就换种写法 二，直接写入鼠标事件方法 复制代码 代码如下: <script> function tab(){ var list = document.getElementById("list").getElementsByTagName("li"); var con = document.getElementById("con").getElementsByTagName("div"); for(var i = 0;i<list.length;i++) { 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> <div id="list"> <ul> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div id="con"> <div style="display:block;">111111</div> <div style="display:none;">222222</div> <div style="display:none;">333333</div> <div style="display:none;">444444</div> </div> 只是简单的改动一下就可以了，因为在JS中有这些方法可以用比如onclick,onmouseover等等,但是用的时候我要先把所有的要用这个事件的元素都遍历一下，如果那个被点击就会传入一个this,我们只需要像第一种方法一样判断一下list是不是和这个this相同，然后下面的操作和第一种方法一样 （这样两种方法都是比较简单的写法，在JS里还有一些比较高级复杂的写法，但是用到的思想和这两种写法大多一样。） 好了就到这里，建议大家可以用这种方法写一个图片切换效果，我想应该很简单吧 下章继续说效果

　　推荐阅读

　　深入理解JavaScript系列（16） 闭包（Closures）

介绍 本章我们将介绍在JavaScript里大家经常来讨论的话题 —— 闭包（closure）。闭包其实大家都已经谈烂了。尽管如此，这里还是要试着从理论角度来讨论下闭包，看看ECMAScript中的闭包内部究竟是如何工作的。 正如>>>详细阅读

本文标题：javascript针对DOM的应用分析（四）

地址：http://www.17bianji.com/kaifa2/JS/23491.html

 1/2    1