role="tablist" / role="tab" / role="tabpanel" 完整手写 tabs 示例

首页为默认选中标签页，含最新动态与核心功能；关于我们介绍专注无障碍体验的技术团队；联系方式提供邮箱和电话；支持键盘方向键、home/end切换标签。

<div role="tablist" aria-label="导航选项卡">
  <button 
    role="tab" 
    aria-selected="true" 
    aria-controls="panel-home" 
    id="tab-home"
    tabindex="0"
  >
    首页
  </button>
  <button 
    role="tab" 
    aria-selected="false" 
    aria-controls="panel-about" 
    id="tab-about"
    tabindex="-1"
  >
    关于我们
  </button>
  <button 
    role="tab" 
    aria-selected="false" 
    aria-controls="panel-contact" 
    id="tab-contact"
    tabindex="-1"
  >
    联系方式
  </button>
</div>

<div 
  role="tabpanel" 
  id="panel-home" 
  aria-labelledby="tab-home"
  tabindex="0"
>
  <h3>欢迎来到首页</h3>
  <p>这是网站的主页面内容，包含最新动态和核心功能入口。</p>
</div>

<div 
  role="tabpanel" 
  id="panel-about" 
  aria-labelledby="tab-about"
  tabindex="0"
  hidden
>
  <h3>关于我们</h3>
  <p>我们是一家专注于无障碍体验与现代前端实践的技术团队。</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/1947" title="Okaaaay"><img
                                                                                src="https://img.php.cn/upload/ai_manual/001/246/273/68b6d30d43b98419.png" alt="Okaaaay"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/1947" title="Okaaaay">Okaaaay</a>
                                                                        <p>适用于所有人的AI文本和内容生成器</p>
                                                                </div>
                                                                <a href="/ai/1947" title="Okaaaay" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
</div>

<div 
  role="tabpanel" 
  id="panel-contact" 
  aria-labelledby="tab-contact"
  tabindex="0"
  hidden
>
  <h3>联系方式</h3>
  <p>邮箱：contact@example.com<br>电话：+86 123-4567-8900</p>
</div>

<script>
  const tabs = document.querySelectorAll('[role="tab"]');
  const panels = document.querySelectorAll('[role="tabpanel"]');

  function hideAllTabs() {
    tabs.forEach(tab => tab.setAttribute('aria-selected', 'false'));
  }

  function hideAllPanels() {
    panels.forEach(panel => panel.hidden = true);
  }

  function showTab(tabIndex) {
    const tab = tabs[tabIndex];
    const panelId = tab.getAttribute('aria-controls');
    const panel = document.getElementById(panelId);

    hideAllTabs();
    hideAllPanels();

    tab.setAttribute('aria-selected', 'true');
    tab.setAttribute('tabindex', '0');
    panel.hidden = false;
    panel.removeAttribute('hidden');
    panel.focus();
  }

  // 初始化：默认选中第一个 tab
  tabs[0].setAttribute('aria-selected', 'true');

  // 键盘支持（左右方向键切换）
  tabs.forEach((tab, index) => {
    tab.addEventListener('keydown', e => {
      if (e.key === 'ArrowRight') {
        e.preventDefault();
        const next = (index + 1) % tabs.length;
        tabs[next].focus();
        showTab(next);
      } else if (e.key === 'ArrowLeft') {
        e.preventDefault();
        const prev = (index - 1 + tabs.length) % tabs.length;
        tabs[prev].focus();
        showTab(prev);
      } else if (e.key === 'Home') {
        e.preventDefault();
        tabs[0].focus();
        showTab(0);
      } else if (e.key === 'End') {
        e.preventDefault();
        tabs[tabs.length - 1].focus();
        showTab(tabs.length - 1);
      }
    });

    tab.addEventListener('click', () => {
      const tabIndex = Array.from(tabs).indexOf(tab);
      showTab(tabIndex);
    });
  });

  // 初始聚焦第一个 tab
  tabs[0].focus();
</script>