使用vanilla JavaScript模拟选项卡和enter键

<div id="tab-container">
  <ul id="tab-list">
    <li data-tab="tab1">Tab 1</li>
    <li data-tab="tab2">Tab 2</li>
    <li data-tab="tab3">Tab 3</li>
  </ul>
  <div id="tab-content">
    <div id="tab1" class="tab-content-item">
      Tab 1 Content
    </div>
    <div id="tab2" class="tab-content-item">
      Tab 2 Content
    </div>
    <div id="tab3" class="tab-content-item">
      Tab 3 Content
    </div>
  </div>
</div>

.tab-content-item {
  display: none;
}

.tab-content-item.active {
  display: block;
}

// 获取选项卡元素和选项卡内容元素
const tabList = document.getElementById('tab-list');
const tabContent = document.getElementById('tab-content');

// 初始化默认选项卡
const defaultTab = tabList.firstElementChild;
defaultTab.classList.add('active');
document.getElementById(defaultTab.getAttribute('data-tab')).classList.add('active');

// 监听选项卡点击事件
tabList.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    // 移除所有选项卡的active类名
    Array.from(tabList.children).forEach((tab) => {
      tab.classList.remove('active');
    });

    // 添加当前选项卡的active类名
    event.target.classList.add('active');

    // 显示对应的选项卡内容
    const tabId = event.target.getAttribute('data-tab');
    Array.from(tabContent.children).forEach((content) => {
      if (content.id === tabId) {
        content.classList.add('active');
      } else {
        content.classList.remove('active');
      }
    });
  }
});

// 监听enter键按下事件
document.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    // 获取当前选中的选项卡
    const activeTab = document.querySelector('#tab-list .active');
    
    // 获取下一个选项卡
    let nextTab = activeTab.nextElementSibling;
    if (!nextTab) {
      nextTab = tabList.firstElementChild;
    }

    // 触发下一个选项卡的点击事件
    nextTab.click();
  }
});