原生JS修改指定id的tab-content类div样式失效问题

你的代码共有3处直接导致运行失败的问题：

• 函数未声明入参：定义showTabContent时没有设置接收参数的形参，调用时传入的2根本没有被赋值给tabID变量，直接读取tabID会触发「变量未定义」的运行时错误。
• 方法返回值理解错误：classList.contains("tab-content")的作用是判断元素是否包含指定类名，返回值是布尔类型（true/false），布尔值不存在style属性，后续链式调用.style.display会直接抛出「无法读取属性style」类的错误。
• 类型匹配隐患：HTML中id属性的值是字符串类型，直接传入数字类型的id虽然在部分浏览器下会被隐式转换，但存在兼容风险。

function showTabContent(tabID) {
  // 获取目标元素，显式将传入的id转为字符串匹配DOM的id属性
  const targetTab = document.getElementById(String(tabID));
  // 校验元素存在、且带有指定类名后再修改样式
  if (targetTab && targetTab.classList.contains("tab-content")) {
    targetTab.style.display = "block";
  }
}

调用showTabContent(2)即可正常命中id为2、类名为tab-content的元素，将其display设置为block。

补充：如果是实现常规Tab切换效果，显示当前目标tab前，建议先把所有其他tab-content类的元素设置为display: none，避免多个tab内容同时显示。

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