DOM特效之tab切换的实现

最新推荐文章于 2022-07-03 17:24:05 发布

u013035477

最新推荐文章于 2022-07-03 17:24:05 发布

阅读量621

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/songsong189/article/details/52578927

版权

Web前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

我们肯定在页面中遇到过类似于页面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";
    }