詳解用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代碼中給首頁(yè)（默認(rèn)選中）加上class名active
<a class="tab_item active"> <span class="iconfont icon-shouye"></span> <span class="tab2">首頁(yè)</span> </a>
效果是這樣的：
在點(diǎn)擊切換的過(guò)程中，我們需要給被選中的子選項(xiàng)添加“active”，然后讓其它子選項(xiàng)刪除“active”名。
該怎么做呢？
首先，通過(guò)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)然也可以通過(guò)其他方法，
以上所述是小編給大家介紹的用JS添加和刪除class類名詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
JavaScript基礎(chǔ)知識(shí)點(diǎn)歸納(推薦)
下面小編就為大家?guī)?lái)一篇JavaScript基礎(chǔ)知識(shí)點(diǎn)歸納(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
ASP小貼士/ASP Tips javascript tips可以當(dāng)桌面
今天看到《ASP小貼士/ASP Tips》 我也去把JavaScript的tips 下下來(lái)了。 看看是A4的。 自己把他改成1024 * 768 剛好可以用來(lái)做桌面2009-12-12
向JavaScript的數(shù)組中添加元素的方法小結(jié)
這篇文章主要介紹了向JavaScript的數(shù)組中添加元素的方法小結(jié),分別舉了一些JS數(shù)組操作的例子,基本需要的朋友可以參考下2015-10-10
javascript history對(duì)象(歷史記錄)使用方法(實(shí)現(xiàn)瀏覽器前進(jìn)后退)
本文主要介紹了window.history對(duì)象使用方法2014-01-01
javascript 進(jìn)階篇1 正則表達(dá)式，cookie管理，userData
接下來(lái)開(kāi)始我們的進(jìn)階之路,更實(shí)用的技巧分享2012-03-03
前端編碼規(guī)范（3）JavaScript 開(kāi)發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范（3）JavaScript 開(kāi)發(fā)規(guī)范,需要的朋友可以參考下2017-01-01
JavaScript中判斷對(duì)象類型的幾種方法總結(jié)
本篇文章是對(duì)JavaScript中判斷對(duì)象類型的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要介紹了將RGB值轉(zhuǎn)換為灰度值的簡(jiǎn)單算法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
簡(jiǎn)單談?wù)凧avascript函數(shù)中的arguments
在JavaScript中，arguments對(duì)象是比較特別的一個(gè)對(duì)象，實(shí)際上是當(dāng)前函數(shù)的一個(gè)內(nèi)置屬性。下面這篇文章主要介紹了關(guān)于Javascript函數(shù)中的arguments面貌以及如何轉(zhuǎn)化為數(shù)組的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-02-02
詳解Javascript ES6中的箭頭函數(shù)(Arrow Functions)
箭頭函數(shù)，若有了解過(guò)coffeeScript的同學(xué)，或許對(duì)此印象深刻，因?yàn)樗梢宰屨Z(yǔ)法省略不少，特別是對(duì)于回調(diào)函數(shù)，會(huì)讓代碼更清晰簡(jiǎn)潔。下面讓我們一起來(lái)學(xué)習(xí)學(xué)習(xí)ES6中的箭頭函數(shù)。2016-08-08