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