宝哥软件园

解释如何用JS添加和删除类名

编辑:宝哥软件园 来源:互联网 时间:2021-08-26

下面描述如何向节点添加和删除类名

Add: classList.add('类名');

删除:节点。classList.remove('类名');

以选项卡切换为例:

在编写选项卡切换时,我们通常会为选定的选项卡设置不同的样式。常见的方法是在选定的选项卡中添加一个类名,然后更改该类名的样式。

例如,一个类被称为“活动的”

设置样式。活动{ color: #FFD113!重要;}将活动类名添加到html代码的第一页(默认情况下选中)

a class=' tab _ item active ' span class=' icon font icon-suye '/span span class=' tab 2 '主页/span/a效果如下:

在点击切换的过程中,我们需要给选中的子选项加上“active”,然后让其他子选项删除“active”的名称。

我该怎么办?

首先,通过JS获取所有标签节点

var arr=document . getelementsbyclassname(' tab _ item ');那就补充一下。向选定的子节点添加('类名'),例如:

arr[I]. class list . add(' active ');这会将“活动”类名添加到当前子选项卡中。

然后我们去掉“活动”的其他选项卡,只需添加。classList.remove(类名)位于其他子节点之后,例如:

arr[j]. class list . remove(' active ');这样,我们达到了预期的功能。

当然,也可以使用其他方法,

以上是边肖介绍的用JS添加和删除类名的详细说明和集成,希望对大家有所帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持!

更多资讯
游戏推荐
更多+