详解用JS添加和删除class类名


Posted in Javascript onMarch 25, 2019

下面介绍一下如何给一个节点添加和删除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>

效果是这样的:

详解用JS添加和删除class类名

在点击切换的过程中,我们需要给被选中的子选项添加“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添加和删除class类名详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
vuex 的简单使用
Mar 22 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
详解javascript设计模式三:代理模式
Mar 25 #Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 #Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 #Javascript
9102了,你还不会移动端真机调试吗
Mar 25 #Javascript
详解原生JS回到顶部
Mar 25 #Javascript
javascript验证form表单数据的案例详解
Mar 25 #Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 #Javascript
You might like
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
PHP队列用法实例
2014/11/05 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
简单JS代码压缩器
2006/10/12 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
js切换光标示例代码
2013/10/10 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
django使用html模板减少代码代码解析
2017/12/12 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
我的画教学反思
2014/04/28 职场文书
500字小学生检讨书
2015/02/19 职场文书
学校国庆节活动总结
2015/03/23 职场文书
请客吃饭开场白
2015/06/01 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
高一数学教学反思
2016/02/18 职场文书