详解用JS添加和删除class类名
更新时间：2019年03月25日 16:34:58 作者：丿灬安之若死
这篇文章主要介绍了用JS添加和删除class类名，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
下面介绍一下如何给一个节点添加和删除class名
添加：节点.classList.add("类名")；
删除：节点.classList.remove("类名")；
以tab切换为例：
在写tab切换的时候，通常我们会给选中的tab设置不同的样式，常用的方法是给被选中的tab新增一个class名，然后改这个class名的样式。
比如 起一个class名叫“active”
设置样式
.active{
color: #FFD113 !important;
}
在html代码中给首页（默认选中）加上class名active
<a class="tab_item active"> <span class="iconfont icon-shouye"></span> <span class="tab2">首页</span> </a>
效果是这样的：
在点击切换的过程中，我们需要给被选中的子选项添加“active”，然后让其它子选项删除“active”名。
该怎么做呢？
首先，通过JS取到所有tab的节点
var arr = document.getElementsByClassName("tab_item");
然后只需在被选中的子节点加上.classList.add("类名")，比如：
arr[i].classList.add("active");
这样就给当前子选项卡添加了“active”类名。
然后我们把其他的选项卡的“active”移除，只需要在其他子节点的后面加上.classList.remove("类名")，比如：
arr[j].classList.remove("active");
这样就实现了我们想要的功能。
当然也可以通过其他方法，
以上所述是小编给大家介绍的用JS添加和删除class类名详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
首先要说明的是，咱现在不是高手，最多还是一个半桶水，算是入了JS的门2013-11-11
这篇文章主要介绍了javascript中var的重要性,实例分析了不使用var声明变量可能会出现的问题,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
本篇适合javascript新手或者学了前端一段时间，对js概念不清晰的同学。本文将讲述几点对于初学者遇到的javascript的坑，相信对javascript基础薄弱的同学，可以加深对javascript的理解2021-10-10
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
这篇文章主要介绍了JavaScript onkeypress事件入门实例,onkeypress事件捕捉按下或按住一个键盘按键的情况,需要的朋友可以参考下2014-10-10
本文将详细介绍cument.execCommand()用法,需要了解的朋友可以参考下2012-12-12
javascript replace()第二个参数为函数时的参数用法
replace()函数具有替换功能，它可以具有两个参数，第一个参数可以是要被替换的字符串或者匹配要被替换字符串的正则表达式，第二个参数可以是替换文本或者一个函数，下面看一下关于replace()函数的几个代码实例2016-12-12
这篇文章主要为大家介绍了javascript迭代器模式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
本篇是你必须知道的Javascript系列第三篇，我们主要来看看Javascript是如何面向对象的编程的,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了JavaScript中switch语句的用法详解,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了深入学习JavaScript中的Rest参数和参数默认值,是JS入门学习中的基础知识,需要的朋友可以参考下2015-07-07
最新评论