页面点击其他区域后Tab链接active样式消失问题求助

问题根源是你代码里的箭头函数导致this指向错误：箭头函数不会绑定自身的this，它的this继承自外层作用域，所以点击Tab时，this.className += " active"这行根本没给点击的按钮加上active类，只是在错误的上下文里执行，导致切换后按钮的active状态其实没正确设置，后续点击其他区域样式自然就消失了。

修复方案一：换成普通函数 #

把事件监听里的箭头函数改成普通函数，让this指向点击的Tab元素：

const tabsContainer = document.getElementById("links");
const tabs = tabsContainer.getElementsByClassName("tablinks");  

for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener("click", function() {
    let current = document.getElementsByClassName("active");
    // 加判断避免页面初始无active元素时报错
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    this.className += " active";    
  });
};

修复方案二：使用事件对象的target属性 #

如果想保留箭头函数，就用事件参数的target属性获取点击的元素：

const tabsContainer = document.getElementById("links");
const tabs = tabsContainer.getElementsByClassName("tablinks");  

for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener("click", (e) => {
    let current = document.getElementsByClassName("active");
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    e.target.className += " active";
  });
};

更严谨的写法：用classList操作类名 #

直接操作className字符串容易出错，推荐用classList的add/remove方法，更安全可靠：

const tabsContainer = document.getElementById("links");
const tabs = tabsContainer.getElementsByClassName("tablinks");  

for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener("click", function() {
    let current = document.getElementsByClassName("active");
    if (current.length > 0) {
      current[0].classList.remove("active");
    }
    this.classList.add("active");    
  });
};

内容的提问来源于stack exchange，提问作者Rei