详解用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类名详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了JavaScript中的pow()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
本文整理汇总了js获取浏览器基本信息资料，非常的全面，也对IE及非IE浏览器之间的区别进行了分析，是篇非常不错的文章，这里推荐给大家，前端设计师们千万不要错过2014-11-11
你所要知道JS（DHTML）中的一些技巧...2007-01-01
JavaScript使用escape()、encodeURI()和decodeURI()实现URI编码解码
这篇文章介绍了JavaScript使用escape()、encodeURI()和decodeURI()实现URI编码解码的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
第四章 案例研究：javascript美术馆2009-02-02
引用类型通常叫作类（class），也就是说，遇到引用值时，所处理的就是对象。2012-08-08
这篇文章主要为大家介绍了js基石系列学习之错误类型示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
JavaScript学习笔记整理_setTimeout的应用
下面小编就为大家带来一篇JavaScript学习笔记整理_setTimeout的应用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
document.getElementById获取控件对象为空的解决方法
今天写个网页，想在页面加载onLoad时，动态显示由后台其他程序传来的数据时，用document.getElementById获取控件对象总是为空。但是检查了这个id确实是存在的。看下文的示例和解决方法2013-11-11
详解JavaScript正则表达式中的global属性的使用
这篇文章主要介绍了详解JavaScript正则表达式中的global属性的使用,是JS学习进阶中的重要知识点,需要的朋友可以参考下2015-06-06
最新评论