js添加或删除class类名
作者：Miao 阅读：5570次
通常通过js方法给div进行class类名的添加或者删除，比较常见的就是tab切换了，下面就来具体讲一下如何使用js进行操作，最后会附上完整实例代码：
| <div class="ul"> | |
| <div class="li active" onclick="funJs(0)">HTML</div> | |
| <div class="li" onclick="funJs(1)">CSS</div> | |
| <div class="li" onclick="funJs(2)">JavaScript</div> | |
| </div> |
首先：获取所有li节点，这里的active就是我们要进行添加、删除的样式。
var li_arr = document.getElementsByClassName("li");方法一：原生写法
| function funJs(index) { | |
| for (var i = 0; i < li_arr.length; i++) { | |
| // 当前点击li添加active样式 | |
| if (i == index) { | |
| li_arr[i].classList.add("active"); | |
| } | |
| // 其余删除active样式 | |
| else { | |
| li_arr[i].classList.remove("active"); | |
| } | |
| } | |
| } |
方法二：jQuery写法，不要忘了引入[jQuery版本库]哟！
| function funJquery(index) { | |
| $(".li").eq(index).addClass("active").siblings().removeClass("active"); | |
| } |
实例代码
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>js添加或删除class类名</title> | |
| <style type="text/css"> | |
| .ul { | |
| width: 100px; | |
| height: 150px; | |
| } | |
| .ul .li { | |
| width: 100px; | |
| line-height: 50px; | |
| text-align: center; | |
| background: #000; | |
| border-bottom: 1px solid #fff; | |
| color: #fff; | |
| } | |
| .ul .active { | |
| background: #f30; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="ul"> | |
| <div class="li active" onclick="funJs(0)">HTML</div> | |
| <div class="li" onclick="funJs(1)">CSS</div> | |
| <div class="li" onclick="funJs(2)">JavaScript</div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script> | |
| <script type="text/javascript"> | |
| // 获取所有li节点 | |
| var li_arr = document.getElementsByClassName("li"); | |
| // 方法一：js原生 | |
| function funJs(index) { | |
| for (var i = 0; i < li_arr.length; i++) { | |
| if (i == index) { | |
| li_arr[i].classList.add("active"); | |
| } else { | |
| li_arr[i].classList.remove("active"); | |
| } | |
| } | |
| } | |
| // 方法二：jQuery写法，不要忘了引入jQuery版本库哟！ | |
| function funJquery(index) { | |
| $(".li").eq(index).addClass("active").siblings().removeClass("active"); | |
| } | |
| </script> | |
| </body> | |
| </html> |
本站部分文章、数据、素材收集于网络，所有版权均归源网站或原作者所有！
如果侵犯了您的权益，请来信告知我们下线删除，邮箱：357234902@qq.com
