【DOM】javascript针对DOM的应用分析（四）

复制代码 代码如下:

<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针对DOM的应用分析（四）的用户互动如下：

　　相关问题：javascript解析

　　答：你好，javascript中解析html有三种方式，分别是 1.通过类名获取html元素集合，返回的是html元素集合，document.getElementsByClassName(); 2.通过name属性值获取元素集合，返回的dom对象的集合，document.getElementsByName(); 3.通过id属性获取... >>详细

　　相关问题：对JavaScript的认识和经验

　　答：1:学习无重点，js应该从实践中去学，例如常用到表单验证，这里就涉及到事件，正则等内容，还有就是常用的动画特效，当做网页需要实现某些功能时，再考虑js的实现，网上资料很多，很容易就能看懂的，想要一次性全部学懂了再去做网站，就没必要了... >>详细

　　相关问题：1.使用JavaScript客户端脚本的好处有哪些？ 2．简...

　　答：1.脚本语言常用的无外乎：jscript和vbscript 两者相比各有各的特点，一般来说JavaScript能够运行在不同平台上，比如能够同时在Windows系统的IE、Linux的NS、Mazilla等浏览器上运行，而VBScript则只能在Windows系统的IE上运行，因此JavaScript适... >>详细