DOM特效之tab切换的实现

       我们肯定在页面中遇到过类似于页面tab的相关的元素，那么怎么实现他的特效呢？

       

  1.他的HTML代码是

<div class="box" id="box">    <div class="hd">        <span class="current">体育</span>        <span>娱乐</span>        <span>新闻</span>        <span>综合</span>    </div>    <div class="bd">        <ul>            <li class="current">我是体育模块</li>            <li>我是娱乐模块</li>            <li>我是新闻模块</li>            <li>我是综合模块</li>        </ul>    </div>

2.我们要给每一个span标签添加点击的事件，同时添加一个自定义的属性，这样做是便于找li标签，这里最重要的是用到了自定义的属性index，获取使用循环做的

var spans=document.getElementsByClassName("hd")[0].getElementsByTagName("span");    for(var i=0;i<spans.length;i++){        spans[i].onclick=clickHandle;        spans[i].setAttribute("index", i.toString());    }

3.在点击时除了完成自身的样式也要让下面的li标签完成样式的切换，具体是哪个li标签这就看span标签的index的属性值了这里

 function clickHandle(){        //第一步把所有的span标签的类样式移除        for(var j=0;j<spans.length;j++){            spans[j].removeAttribute("class");        }        this.className="current";        //获取所有的li标签并移除每个li标签的类样式        var lis=document.getElementById("box").getElementsByTagName("li");        for(var k=0;k<lis.length;k++){            lis[k].removeAttribute("class");        }        lis[parseInt(this.getAttribute("index"))].className="current";    }