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

下面介绍一下如何给一个节点添加和删除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类名详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 原生js实现class的添加和删除简单代码

    实例代码: function hasClass( elements,cName ){ return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); }; function addClass( elements,cName ){ if( !hasClass( elements,cName ) ){ elements.className += " "

  • 原生js封装添加class,删除class的实例

    一.添加class function addClass(ele,cName) { var arr = ele.className.split(' ').concat(cName.split(" ")); for(var i=0;i<arr.length;i++){ for(var k=arr.length-1;k>i;k--){ (arr[k]==="")&&arr.splice(k,1); (arr[i]===arr[k])&&

  • 原生js添加一个或多个类名的方法分析

    本文实例讲述了原生js添加一个或多个类名的方法.分享给大家供大家参考,具体如下: 好吧今天写个js,不知道怎么添加类名了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style type="text/css" media="screen"

  • js实现class样式的修改、添加及删除的方法

    本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: 复制代码 代码如下: <table> <tbody> <tr> <td>js实现class的样式的修改.添加.删除</td> <td>  <a e_value="g_sn" ename="商品编码" c

  • 原生js实现查找/添加/删除/指定元素的class

    复制代码 代码如下: window.onload = function(){ var gaga = document.getElementById( "gaga" ); addClass( gaga,"gaga1" ) addClass( gaga,"gaxx" ); removeClass( gaga,"gaga1" ) removeClass( gaga,"gaga" ) function hasCla

  • JS添加或修改控件的样式(Class)实现方法

    使用js 给页面组件添加class 或者删除class,以及使用jquery的方式添加或修改. <input id="txtBianCeng" type="text" /> .lezhu99 { color:#cc0000; } 添加或修改样式(Class) document.getElementById("txtBianCeng").className = "lezhu99"; 删除样式(Class) docum

  • Javascript 检测、添加、移除样式(className)函数代码

    复制代码 代码如下: <script type="text/javascript"> // 说明:添加.移除.检测 className function hasClass(element, className) { var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); return element.className.match(reg); } function addClass(element, className) {

  • 基于JavaScript实现类名的添加与移除

    方法1:使用className属性: 方法2:使用classList API: //用于匹配类名存在与否 function reg(name){ return new RegExp('(^|\\s)'+name+'(\\s+|$)'); } //hasClass addClass removeClass toogleClass var hasClass,addClass,removeClass; if('classList' in document.documentElement){ hasCl

  • 向JavaScript的数组中添加元素的方法小结

    在数组的开头添加新元素 - unshift() 源代码: <!DOCTYPE html> <html> <body> <p id="demo">Click the button to add elements to the array.</p> <button onclick="myFunction()">Try it</button> <script> function

  • JavaScript DOM元素常见操作详解【添加、删除、修改等】

    本文实例讲述了JavaScript DOM元素常见操作.分享给大家供大家参考,具体如下: DOM概念 DOM(Document Object Model):文档对象模型. 通过开发者工具的Elements标签页可以查看 通过开发者工具的Sources标签页也可以观察到整个文档是有一系列节点 整个文档是由一系列节点对象组成的一棵树. 节点(Node)包括元素节点(1).属性节点(2).文本节点(3)(1..2..3..代表节点类型)_ var th1= document.getElementByI

  • javaScript给元素添加多个class的简单实现

    javaScript给元素添加多个class的简单实现 <html> <head> <style type="text/css"> .div2{ font-size:16px; color:orange; } .div3{ font-size:20px; color:blue; } <style> <script type="text/javascript"> [1]直接把样式赋值给className va

随机推荐