原生js 实现一个标签样式之间的切换

71 阅读 0 评论 47 点赞

我是靠谱客的博主清秀咖啡豆，最近开发中收集的这篇文章主要介绍原生js 实现一个标签样式之间的切换，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在这里插入图片描述
就是实现一下上面的一个小demo 这个在实际的工作中用的还是比较多的

原理倒是很简单就是通过设置一个激活状态的（active）样式然后不停的切换到用户点击的那个元素身上其他的元素去掉 active 类名

其实通过原生来做照样也有两种方式

上面的是通过 ul li 标签进行铺开展示的
你可以把点击事件放到 ul 也可以放到li 身上看你自己喜欢了
不过还是建议绑定到父元素上通过事件委托的方式来进行判断

第一种方式

choiceNumber(e) {
   if (e.target.nodeName == "LI") {
        var oLi = document.querySelectorAll('.user_list li');
        for (var item of oLi) {
            if (item.className == "active") {
                item.className = "";
            }
            
        }
        e.target.className = "active"
    }

}

但是上面的那种方式显然是有风险直接将一个元素的类名清空如果还有其他的类名存在的话这样显然是不合适的同样直接 .className =“类名” 把之前的类名也给覆盖乐

这个时候我们要用第二种方式乐

choiceNumber(e) {
         if (e.target.nodeName == "SPAN") {
                var oLi = document.querySelectorAll('.user_list li');
                for (var item of oLi) {
                    if(item.classList.contains('active')) {
                        item.classList.remove('active');
                    }
                }
                // 给父节点添加类名
               e.target.classList.add('active');
            }

        }