如何使用JavaScript获取激活状态的Tab标签名称

嘿，我看你已经有一个能正常切换的Tab组件了，想要获取当前激活的Tab名称对吧？这里有几个简单好用的方法，我给你一步步说清楚：

方法一：切换时直接记录（最直接省心） #

每次点击Tab都会触发openCity函数，这个函数本身就接收了当前Tab对应的城市名cityName，我们直接利用这个参数就行！修改一下你的函数，添加几行代码来保存或者使用这个名称：

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
  
  // 新增：这里就能拿到当前激活的Tab名称啦
  const activeTabName = cityName;
  console.log("当前激活的Tab是：", activeTabName);
  // 要是需要在其他地方用，就把它存到全局变量里
  // window.activeTab = activeTabName;
}

这样每次切换Tab时，你不仅能看到控制台打印的激活名称，还能把这个值存起来给其他功能调用，非常方便。

方法二：主动查询DOM获取（适合随时调用） #

如果有时候你需要在切换操作之外的时机（比如点击某个按钮时）获取当前激活的Tab，那可以直接查询页面上带有active类的Tab按钮，然后取它的文本内容：

function getActiveTabName() {
  // 找到带active类的tablinks元素
  const activeTab = document.querySelector(".tablinks.active");
  if (activeTab) {
    // 取出文本并去掉前后空格
    return activeTab.textContent.trim();
  }
  return null; // 要是没有激活的Tab，就返回null
}

// 用的时候直接调用就行
console.log("当前激活的Tab：", getActiveTabName());

这个方法不用修改原来的切换逻辑，想什么时候查就什么时候查，灵活性很高。

别忘了初始化默认激活的Tab #

你的代码里已经给London的Tab加了defaultOpen的ID，页面加载时最好触发一下它的点击事件，确保默认激活状态正确，同时也能初始化激活名称：

window.onload = function() {
  // 触发默认Tab的点击，自动设置激活状态
  document.getElementById("defaultOpen").click();
};

这样页面一打开，就能正确识别默认激活的London Tab啦。

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