在不使用JQuery情况下，如何通过ES6只使用原生js去实现选项卡特效？

前言

在一些特殊的项目当中，有时候可能无法使用JQuery，那么我们在不使用JQuery的情况下如何使用原生js去实现一个选项卡特效插件？

部分HTML代码

<div class="hu_party_title">
   <div class="tab_title tab_active1">党群工作</div>
   <div class="tab_title">党建工作</div>
   <div class="tab_title">团青工作</div>
   <div class="tab_title">团会工作</div>
 </div>
 <div class="hu_party_content">
   <div class="hu_party_tab_content tab_active2">党群工作</div>
   <div class="hu_party_tab_content">党建工作</div>
   <div class="hu_party_tab_content">团青工作</div>
   <div class="hu_party_tab_content">团会工作</div>
 </div>

部分CSS代码

.hu_party_title{
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hu_party_title div{
  padding: 5px 30px;
  font-size: 20px;
  cursor: pointer;
}
.tab_title{
  color: #2F4A7E;
  border: 1px solid #2F4A7E;
}
.hu_party_tab_content{
  width: 100%;
  height: auto;
  min-height: 460px;
  display: none;
}
.tab_active1{
  background: #2F4A7E !important;
  color: white !important;
}
.tab_active2{
  display: block;
}

js部分代码（ES6）

//选项卡头部获取
const tab = document.getElementsByClassName('tab_title');
//选项卡内容获取
const tab_content = document.getElementsByClassName('hu_party_tab_content');
for (let i = 0; i < tab.length; i++) {
//监听选项卡头部点击事件
  tab[i].addEventListener('click',function () {
  	//判断除点击之外的同层级其他所有元素，移除点击添加的class效果
    for (let j = 0; j < tab.length; j++) {
      if( j !== i ){
        tab[j].classList.remove('tab_active1'); 
      }  
    };
    //点击选项卡头部选中样式添加
    tab[i].classList.add('tab_active1')
    for (let s = 0; s < tab_content.length; s++) {
    //选中对应的内容显示，不选中的内容消失
      if (i==s) {
        tab_content[s].classList.add('tab_active2');
      } else {
        tab_content[s].classList.remove('tab_active2');
      }
    }
  })
}

最终效果

通过以上三步，我们就简单完成了一个依据ES6标准纯原生js实现的一个选项卡特效插件Demo，使用js实现选项卡的效果，远不如JQuery方便，不可以链式调用，也不可以使用一些现成的方法，需要处理的元素，只能通过js去筛选去除，js实现的代码量远比JQuery多得多。

本文原创，原创不易，如需转载，请联系作者授权。