详解用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类名详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
JavaScript DOM元素常见操作详解【添加、删除、修改等】
本文实例讲述了JavaScript DOM元素常见操作.分享给大家供大家参考,具体如下: DOM概念 DOM(Document Object Model):文档对象模型. 通过开发者工具的Elements标签页可以查看 通过开发者工具的Sources标签页也可以观察到整个文档是有一系列节点 整个文档是由一系列节点对象组成的一棵树. 节点(Node)包括元素节点(1).属性节点(2).文本节点(3)(1..2..3..代表节点类型)_ var th1= document.getElementByI
-
向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
-
原生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添加一个或多个类名的方法分析
本文实例讲述了原生js添加一个或多个类名的方法.分享给大家供大家参考,具体如下: 好吧今天写个js,不知道怎么添加类名了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style type="text/css" media="screen"
-
原生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添加或修改控件的样式(Class)实现方法
使用js 给页面组件添加class 或者删除class,以及使用jquery的方式添加或修改. <input id="txtBianCeng" type="text" /> .lezhu99 { color:#cc0000; } 添加或修改样式(Class) document.getElementById("txtBianCeng").className = "lezhu99"; 删除样式(Class) docum
-
基于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样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: 复制代码 代码如下: <table> <tbody> <tr> <td>js实现class的样式的修改.添加.删除</td> <td> <a e_value="g_sn" ename="商品编码" c
-
原生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 += " "
-
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给元素添加多个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
随机推荐
- Lua中使用模块的一些基础知识
- java实现可安装的exe程序实例详解
- java使用JMF实现音乐播放功能
- asp.net 购物车实现详细代码
- bootstrap table动态加载数据示例代码
- JavaScript函数基础详解
- PHP 获取ip地址代码汇总
- Django查找网站项目根目录和对正则表达式的支持
- PHP的PDO操作简单示例
- JS实现的在线调色板实例(附demo源码下载)
- Java web开发中加载图片路径的两种方式
- WMI入门教程之怎么使用WMI?
- js编写“贪吃蛇”的小游戏
- 避免 showModalDialog 弹出新窗体的原因分析
- 简易Dota改键外挂程序制作
- Android Studio插件之Jenkins插件详解
- Android实现多个连续带数字圆圈效果
- C++中小数点输出格式(实例代码)
- three.js中文文档学习之创建场景
- Python3.遍历某文件夹提取特定文件名的实例