脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → DOM → DOM

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

 更新时间：2012年04月15日 22:24:45   作者：  
从这张开始就和大家说一些实用的效果的写法。当然首当其冲的就是我们可爱的TAB选项卡，用JQ写选项卡当然是很方便的而且方法也很多。其实用原生的JS写选项卡方法也很多
下面我就写几个给大家看看
一，点击传参方法
复制代码 代码如下:

<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里还有一些比较高级复杂的写法，但是用到的思想和这两种写法大多一样。）
好了就到这里，建议大家可以用这种方法写一个图片切换效果，我想应该很简单吧

下章继续说效果
您可能感兴趣的文章:

相关文章

最新评论