JS+H5新标签classList。删除添加class

经常要兼容不得不用老方法，总要还下新方法来尝试的

直接上代码：

window.onload = function() {
    var abox = document.querySelectorAll(".sub");
    for (var i = 0; i < abox.length; i++) {
        abox[i].onclick = function() {
            for (var i = 0; i < abox.length; i++) {
                abox[i].classList.remove('active')
            }
            this.classList.add("active");
        }
    }
}

 

简单说明：

div.classList.add("active");

div.classList.remove("active");

div.classList.length 有几个class名字

div.classList.item[0] 获取下标

div.classList.contains("class名") 查看是否存在这个名字 存在是 true 不存在是 false

 

如果存在就移除：

var x = document.getElementById("myDIV");
if (x.classList.contains("mystyle")) {
    x.classList.remove("anotherClass");
} else {
    alert("Could not find it.");
}