用JS添加和刪除class類名

下面介紹一下如何給一個節點添加和刪除class名

添加：節點.classList.add("類名")；

刪除：節點.classList.remove("類名")；

 

以tab切換爲例：

在寫tab切換的時候，一般咱們會給選中的tab設置不一樣的樣式，經常使用的方法是給被選中的tab新增一個class名，而後改這個class名的樣式。

 

好比 起一個class名叫「active」

設置樣式

.active{
    color: #FFD113 !important;
}

在html代碼中給首頁（默認選中）加上class名active

<a class="tab_item active">
    <span class="iconfont icon-shouye"></span>
    <span class="tab2">首頁</span>
</a>

效果是這樣的：

 

在點擊切換的過程當中，咱們須要給被選中的子選項添加「active」，而後讓其它子選項刪除「active」名。

該怎麼作呢？

首先，經過JS取到全部tab的節點

var arr = document.getElementsByClassName("tab_item");

而後只需在被選中的子節點加上.classList.add("類名")，好比：

arr[i].classList.add("active");

這樣就給當前子選項卡添加了「active」類名。

而後咱們把其餘的選項卡的「active」移除，只須要在其餘子節點的後面加上.classList.remove("類名")，好比：

arr[j].classList.remove("active");

這樣就實現了咱們想要的功能。

 

固然也能夠經過其餘方法，好比下面：（來源：https://segmentfault.com/q/1010000002955089?sort=created）