Tab组件点击报错：Uncaught TypeError: Cannot read properties of undefined (reading 'style')

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'style')错误，核心问题出在**var声明的变量没有块级作用域**：

• 用var声明的循环变量i是函数级作用域，循环结束后，i的值会停留在btns.length（比如有3个标签，循环结束后i=3）。
• 当你点击标签触发回调函数时，才会去读取i的值，此时content[i]对应content[3]，超出了数组的索引范围（数组索引从0开始，最大是2），所以content[i]是undefined，访问它的style属性就会抛出错误。

修复方案 #

方案1：用let代替var声明循环变量 #

let有块级作用域，每次循环都会创建一个独立的i变量，回调函数会捕获当前循环的i值：

var btns = document.querySelectorAll(".tablinks");
var content = document.querySelectorAll(".tabcontent");

for(let i=0; i<btns.length;i++){
  btns[i].addEventListener('click', function(){
    // 先隐藏所有内容
    content.forEach(item => item.style.display = "none");
    // 显示当前标签对应的内容
    content[i].style.display = "block";
  })
}

方案2：用闭包保存索引（兼容旧环境） #

如果需要兼容不支持ES6的环境，可以用立即执行函数（IIFE）创建闭包，保存每次循环的索引：

var btns = document.querySelectorAll(".tablinks");
var content = document.querySelectorAll(".tabcontent");

for(var i=0; i<btns.length;i++){
  (function(index){
    btns[index].addEventListener('click', function(){
      content.forEach(item => item.style.display = "none");
      content[index].style.display = "block";
    })
  })(i);
}

方案3：用forEach遍历（更简洁） #

直接用forEach遍历按钮，自动获取当前元素和索引，避免作用域问题：

var btns = document.querySelectorAll(".tablinks");
var content = document.querySelectorAll(".tabcontent");

btns.forEach((btn, index) => {
  btn.addEventListener('click', () => {
    content.forEach(item => item.style.display = "none");
    content[index].style.display = "block";
  });
});

注：以上方案都加入了“隐藏所有内容后再显示当前内容”的逻辑，这是Tab组件的常规行为，避免多个内容同时展示。

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