基于原生js多个元素间无缝平滑切换特效代码

使用方法

//vanilla js -- toggle active class 
// el = object containing the elements to toggle active class and the parent element 
var el = {
  one: document.getElementById('one'),
  two: document.getElementById('two'),
  three: document.getElementById('three'),
  hold: document.getElementById('hold')
};
// func = object containing the logic 
var func = {
  toggleActive: function(ele) {
    ele = event.target;
    var hold = el.hold.children,
        huh = el.hold.children.length,
        hasActive = ele.classList.contains('active');
    for (i = 0; i < huh; i++) {
      if (hold[i].classList.contains('active')) {
        hold[i].classList.remove('active');
      }
    }
    if (!hasActive) {
      ele.classList.add('active');
    }
  }
};

//add listeners when the window loads 
window.onload = function() {
  el.one.addEventListener("click", func.toggleActive);
  el.two.addEventListener("click", func.toggleActive);
  el.three.addEventListener("click", func.toggleActive);
};