控制台提示id未定义，JavaScript标签页功能实现求助

我是JavaScript新手，正在尝试实现一个简单的标签页程序，目前控制台返回'id is not defined'错误，以下是我的代码：

HTML代码 #

<body>
  <div class="wrapper">
    <div class="tabs">
      <div role="tablist" aria-label="Programming Languages">
        <button role="tab" aria-selected="false" id="js">
          JavaScript
        </button>
        <button role="tab" aria-selected="false" id="ruby">Ruby
        </button>
        <button role="tab" aria-selected="false" id="php">
          PHP
        </button>
      </div>
      <div role="tabpanel" aria-labelledby="js" hidden>
        <p>JavaScript is great!</p>
      </div>
      <div role="tabpanel" aria-labelledby="ruby" hidden>
        <p>Ruby is great</p>
      </div>
      <div role="tabpanel" aria-labelledby="php" hidden>
        <p>PHP is great!</p>
      </div>
    </div>
  </div>
  <script src="./tabs.js"></script>
</body>

CSS代码 #

button[aria-selected="true"] {
  background: orange;
  box-shadow: none;
}

JavaScript代码 #

const tabs = document.querySelector('.tabs');
const tabButtons = tabs.querySelectorAll('[role="tab"]');
const tabPanels = tabs.querySelectorAll('[role="tabpanel"]');

function handleTabClick(event) {
  console.log(event);
}
tabButtons.forEach(button => button.addEventListener('click', handleTabClick));

function handleTabClick(event) {
  // hide all tab panels
  tabPanels.forEach(panel => {
    panel.hidden = true;
  });
  // mark all tabs as unselected
  tabButtons.forEach(tab => {
    // tab.ariaSelected = false;
    tab.setAttribute('aria-selected', false);
  });
  // mark the clicked tab as selected
  event.currentTarget.setAttribute('aria-selected', true);
  // find the associated tabPanel and show it!
  const { id } = event.currentTarget;
}

const tabPanel = tabs.querySelector(`[aria-labelledby="${id}"]`);
console.log(tabPanel);
tabPanel.hidden = false;

错误原因及修复方案 #

1. 变量作用域问题

你最后几行查找标签面板的代码处于全局作用域，但id变量是在handleTabClick函数内部定义的，全局作用域无法访问这个局部变量，因此会触发'id is not defined'错误。

2. 重复定义函数

你先后定义了两次handleTabClick函数，后定义的函数会覆盖前一个，导致第一个带console.log(event)的函数完全失效。

修正后的JavaScript代码

const tabs = document.querySelector('.tabs');
const tabButtons = tabs.querySelectorAll('[role="tab"]');
const tabPanels = tabs.querySelectorAll('[role="tabpanel"]');

function handleTabClick(event) {
  // 1. 隐藏所有标签面板
  tabPanels.forEach(panel => {
    panel.hidden = true;
  });
  // 2. 将所有标签标记为未选中状态
  tabButtons.forEach(tab => {
    tab.setAttribute('aria-selected', false);
  });
  // 3. 标记当前点击的标签为选中状态
  const currentTab = event.currentTarget;
  currentTab.setAttribute('aria-selected', true);
  // 4. 找到对应标签面板并显示
  const tabId = currentTab.id;
  const targetPanel = tabs.querySelector(`[aria-labelledby="${tabId}"]`);
  targetPanel.hidden = false;
}

// 给每个标签按钮绑定点击事件
tabButtons.forEach(button => button.addEventListener('click', handleTabClick));

额外优化建议

可以给默认选中的标签（比如第一个）设置初始状态，并默认显示对应的面板，提升初始体验：

<!-- 修改第一个按钮的aria-selected属性 -->
<button role="tab" aria-selected="true" id="js">JavaScript</button>

同时在JS初始化时添加：

// 初始化显示第一个面板
document.querySelector('[aria-labelledby="js"]').hidden = false;

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