详解用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 相关文章推荐
浅析Prototype的模板类 Template
Dec 07 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
js图片处理示例代码
May 12 Javascript
js的touch事件的实际引用
Oct 13 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
详解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 Mysql类 可以参考学习熟悉下
2009/06/21 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
JavaScript中的类继承
2010/11/25 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
回顾Javascript React基础
2019/06/15 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
Python转码问题的解决方法
2008/10/07 Python
py2exe 编译ico图标的代码
2013/03/08 Python
Python是编译运行的验证方法
2015/01/30 Python
介绍Python的Django框架中的QuerySets
2015/04/20 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Python实现FTP文件传输的实例
2019/07/07 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
python实现经典排序算法的示例代码
2021/02/07 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
C语言面试题
2013/05/19 面试题
作风建设演讲稿
2014/05/23 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS