如何使用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的類？

回答

相關問題