詳解用JS添加和刪除class類名
下面介紹一下如何給一個節(jié)點添加和刪除class名
添加：節(jié)點.classList.add("類名")；
刪除：節(jié)點.classList.remove("類名")；
以tab切換為例：
在寫tab切換的時候，通常我們會給選中的tab設(shè)置不同的樣式，常用的方法是給被選中的tab新增一個class名，然后改這個class名的樣式。
比如 起一個class名叫“active”
設(shè)置樣式
.active{
color: #FFD113 !important;
}
在html代碼中給首頁（默認(rèn)選中）加上class名active
<a class="tab_item active"> <span class="iconfont icon-shouye"></span> <span class="tab2">首頁</span> </a>
效果是這樣的：
在點擊切換的過程中，我們需要給被選中的子選項添加“active”，然后讓其它子選項刪除“active”名。
該怎么做呢？
首先，通過JS取到所有tab的節(jié)點
var arr = document.getElementsByClassName("tab_item");
然后只需在被選中的子節(jié)點加上.classList.add("類名")，比如：
arr[i].classList.add("active");
這樣就給當(dāng)前子選項卡添加了“active”類名。
然后我們把其他的選項卡的“active”移除，只需要在其他子節(jié)點的后面加上.classList.remove("類名")，比如：
arr[j].classList.remove("active");
這樣就實現(xiàn)了我們想要的功能。
當(dāng)然也可以通過其他方法，
以上所述是小編給大家介紹的用JS添加和刪除class類名詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
如何學(xué)習(xí)Javascript入門指導(dǎo)
首先要說明的是，咱現(xiàn)在不是高手，最多還是一個半桶水，算是入了JS的門2013-11-11
這篇文章主要介紹了javascript中var的重要性,實例分析了不使用var聲明變量可能會出現(xiàn)的問題,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
本篇適合javascript新手或者學(xué)了前端一段時間，對js概念不清晰的同學(xué)。本文將講述幾點對于初學(xué)者遇到的javascript的坑，相信對javascript基礎(chǔ)薄弱的同學(xué)，可以加深對javascript的理解2021-10-10
JavaScript onkeypress事件入門實例(按下或按住一個鍵盤按鍵)
這篇文章主要介紹了JavaScript onkeypress事件入門實例,onkeypress事件捕捉按下或按住一個鍵盤按鍵的情況,需要的朋友可以參考下2014-10-10
本文將詳細(xì)介紹cument.execCommand()用法,需要了解的朋友可以參考下2012-12-12
javascript replace()第二個參數(shù)為函數(shù)時的參數(shù)用法
replace()函數(shù)具有替換功能，它可以具有兩個參數(shù)，第一個參數(shù)可以是要被替換的字符串或者匹配要被替換字符串的正則表達(dá)式，第二個參數(shù)可以是替換文本或者一個函數(shù)，下面看一下關(guān)于replace()函數(shù)的幾個代碼實例2016-12-12
這篇文章主要為大家介紹了javascript迭代器模式，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
深入學(xué)習(xí)JavaScript中的Rest參數(shù)和參數(shù)默認(rèn)值