如何使用js切换div的类？

-5

我已经完成了这个使用jquery，但不能用js来完成。如何使用js切换div的类？

看看我的代码：

https：// jsfiddle。 net/88pd6zj0/

它只能用第一类=“html”，但不能与其他工作。我试过改变“querySelector”上的“querySelectorAll” - 它没有任何一个类。

如何解决这个问题？谢谢。

来源

2017-04-01 Vladyslav Sharapat

编辑链接请..和a dd相关的代码 –

https://jsfiddle.net/88pd6zj0/ –

suraj意味着你需要把你放在JSFiddle上的代码添加到你的问题中，并用[edit]。 – dorukayhan

尝试document.querySelectorAll（）

var icon = document.querySelectorAll(".buttons div"); 
 
for(i =0;i<icon.length;i++){ 
 
icon[i].addEventListener("click", function(event){ 
 

 
\t event.preventDefault(); 
 
\t this.classList.add("active"); 
 
}); 
 
}

.html, .html5, .css{ 
 
\t width: 80px; 
 
\t height: 80px; 
 
\t border:1px dashed; 
 
    display:inline; 
 
    margin-left:10px; 
 
} 
 
.active{ 
 
    border:1px solid; 
 
}

<div class="buttons"> 
 
\t <div class="html "> 
 
\t <a href="#">HTML</a> 
 
\t </div> 
 
\t <div class="html5" > 
 
\t <a href="#">HTML 5</a> 
 
\t </div> 
 
\t <div class="css"> 
 
\t <a href="#">CSS 3</a> 
 
\t </div> 
 
</div>

来源

2017-04-01 12:37:33 Durga

下面是示例切换类

var icon = document.querySelectorAll(".buttons div"); 
for (var i = 0; i < icon.length; i++) { 
    icon[i].addEventListener("click", function(event) { 
    event.preventDefault(); 
    if(this.className.includes("active")){ 
     this.classList.remove("active"); 
    } else {  
     this.classList.add("active"); 
    }  
    }); 
}

下面是工作的jsfiddle： https://jsfiddle.net/88pd6zj0/3/

来源

2017-04-01 12:50:26 selvarajmas

谢谢，但如何开关类 - 如果我们按第一个按钮 - 应该是坚实的按钮，如果我们按下一个按钮 - 第一类应该是虚线和第二个固体。 –

请参阅upadted jsfiddle https://jsfiddle.net/88pd6zj0/3/ – selvarajmas

如何使用js切换div的类？

回答

相关问题