详解用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类名详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
原生js添加一个或多个类名的方法分析
本文实例讲述了原生js添加一个或多个类名的方法.分享给大家供大家参考,具体如下: 好吧今天写个js,不知道怎么添加类名了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style type="text/css" media="screen"
-
JavaScript DOM元素常见操作详解【添加、删除、修改等】
本文实例讲述了JavaScript DOM元素常见操作.分享给大家供大家参考,具体如下: DOM概念 DOM(Document Object Model):文档对象模型. 通过开发者工具的Elements标签页可以查看 通过开发者工具的Sources标签页也可以观察到整个文档是有一系列节点 整个文档是由一系列节点对象组成的一棵树. 节点(Node)包括元素节点(1).属性节点(2).文本节点(3)(1..2..3..代表节点类型)_ var th1= document.getElementByI
-
基于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
-
JS添加或修改控件的样式(Class)实现方法
使用js 给页面组件添加class 或者删除class,以及使用jquery的方式添加或修改. <input id="txtBianCeng" type="text" /> .lezhu99 { color:#cc0000; } 添加或修改样式(Class) document.getElementById("txtBianCeng").className = "lezhu99"; 删除样式(Class) docum
-
js实现class样式的修改、添加及删除的方法
本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: 复制代码 代码如下: <table> <tbody> <tr> <td>js实现class的样式的修改.添加.删除</td> <td> <a e_value="g_sn" ename="商品编码" c
-
向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给元素添加多个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
-
原生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,删除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])&&
-
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) {
-
原生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 += " "
随机推荐
- Extjs表单输入框异步校验的插件实现方法
- iOS开发之UIScrollView控件详解
- Java集合框架LinkedList详解及实例
- 新手入门:C++下的引用类型
- ThinkPHP模板引擎之导入资源文件方法详解
- 两个小函数让你的ASP程序对SQL注入免疫!
- 浅析IE10兼容性问题(frameset的cols属性)
- 你应该知道PHP浮点数知识
- 详解vue.js全局组件和局部组件
- js去字符串前后空格5种实现方法及比较
- javascript 缓冲效果实现代码 推荐
- Python中利用sorted()函数排序的简单教程
- 了解了这些才能开始发挥jQuery的威力
- 用VBS修改IIS Metabase的代码
- 文件编码导致jquery失效的解决方法
- jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
- Java 和 Javascript 的 Date 与 .Net 的 DateTime 之间的相互转换
- 详解Java线程编程中的volatile关键字的作用
- Python中定时任务框架APScheduler的快速入门指南
- 轻量级asp.net ajax解决方案详解