DOM特效之tab切换的实现

本文主要是介绍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].οnclick=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";}

这篇关于DOM特效之tab切换的实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---