详解用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 相关文章推荐
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
vue axios用法教程详解
Jul 23 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 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
php5 图片验证码实现代码
2009/12/11 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
python 域名分析工具实现代码
2009/07/15 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
Python3匿名函数用法示例
2018/07/25 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
python3中sys.argv的实例用法
2020/04/24 Python
Python pymsql模块的使用
2020/09/07 Python
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
安全月活动总结
2014/05/05 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
导游词之江南周庄
2019/12/06 职场文书
Python基础之条件语句详解
2021/06/16 Python