14. 常见 UI：Tabs、Modal、Accordion

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

三、知识点提醒

Tabs 本质是“状态 + 内容映射”。
弹窗要考虑关闭按钮、点击遮罩、ESC 键关闭。
事件委托可以让动态创建的弹窗按钮也能响应。

四、练习建议

增加 ESC 关闭弹窗。
把 Tabs 内容改成 HTML 卡片。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/14-ui-tabs-modal.js，下面同步展示，方便学习和复制。

// 页面 14：Tabs 与 Modal
const tabData = {
  overview: '产品概览：适合户外墙面、庭院和商业空间。',
  spec: '产品规格：长度 2900mm，宽度 219mm，支持定制颜色。',
  install: '安装说明：建议使用龙骨结构，预留伸缩缝。'
};

const tabs = document.querySelector('#p14-tabs');
const tabContent = document.querySelector('#p14-content');
const modalRoot = document.querySelector('#p14-modal-root');

function setActiveTab(tabName) {
  tabs.querySelectorAll('button').forEach((button) => {
    button.classList.toggle('active', button.dataset.tab === tabName);
  });
  tabContent.textContent = tabData[tabName];
}

function openModal() {
  modalRoot.innerHTML = `
    <div class="modal-mask" role="dialog" aria-modal="true">
      <div class="modal-card">
        <h3>产品咨询</h3>
        <p>这里可以放表单、产品详情、图片或提示信息。</p>
        <button id="p14-close-modal">关闭</button>
      </div>
    </div>
  `;
}

function closeModal() {
  modalRoot.innerHTML = '';
}

tabs.addEventListener('click', (event) => {
  const button = event.target.closest('button[data-tab]');
  if (!button) return;
  setActiveTab(button.dataset.tab);
});

document.querySelector('#p14-open-modal').addEventListener('click', openModal);
modalRoot.addEventListener('click', (event) => {
  if (event.target.matches('.modal-mask, #p14-close-modal')) {
    closeModal();
  }
});
setActiveTab('overview');