详解用JS添加和删除class类名
程序员文章站
2022-06-14 17:43:39
下面介绍一下如何给一个节点添加和删除class名
添加:节点.classlist.add("类名");
删除:节点.classlist.remove("类名");
以...
下面介绍一下如何给一个节点添加和删除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添加和删除class类名
-
详解原生JS动态添加和删除类
-
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
-
详解原生JS动态添加和删除类
-
详解用JS添加和删除class类名
-
js实现添加删除类名active
-
通过js获取元素表单以及遍历dom树和对元素的增删改查js操作内容演练实战了留言板的操作并对自定义属性: dataset对象初步的了解以及对js操作class和classList属性对象事件的添加与删除练习与了解
-
通过js获取元素表单以及遍历dom树和对元素的增删改查js操作内容演练实战了留言板的操作并对自定义属性: dataset对象初步的了解以及对js操作class和classList属性对象事件的添加与删除练习与了解
-
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)