选项卡案例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>经典选项卡</title>
    <style>
      /* 隐藏 */
      .hidden {
        display: none;
      }
      /* 显示 */
      .active {
        display: block;
      }
      .type > *.active,
      .content > *.active {
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="type" style="display: flex"></div>
      <div class="content"></div>
    </div>
    <script type="module">
      import * as tabs from './modules/tabs.js';
      const type = document.querySelector('.type');
      const content = document.querySelector('.content');
      window.onload = () => tabs.createTab(type, content);
      type.onclick = ev => {
        tabs.setContentStatus(ev, ev.target);
      };
    </script>
  </body>
</html>

JS代码部分

// * 栏目数据
const cates = [
  { cid: 1, cname: '国际新闻' },
  { cid: 2, cname: '中国新闻' },
  { cid: 3, cname: '安徽新闻' },
];
// * 列表数据
const details = [
  {
    key: 1,
    cid: 1,
    content: [
      {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
      },
      {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
      },
      {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
      },
    ],
  },
  {
    key: 2,
    cid: 2,
    content: [
      {
        title: '空战隐身无人僚机亮相！',
        url: 'https://news.ifeng.com/c/8KoeDFJXF1b',
      },
      {
        title: '空战隐身无人僚机亮相！',
        url: 'https://news.ifeng.com/c/8KoeDFJXF1b',
      },
      {
        title: '空战隐身无人僚机亮相！',
        url: 'https://news.ifeng.com/c/8KoeDFJXF1b',
      },
    ],
  },
  {
    key: 3,
    cid: 3,
    content: [
      {
        title: '安康码”上新！家庭成员核酸情况查询更便捷',
        url: 'https://ah.ifeng.com/c/8KkGUDhAZNZ',
      },
      {
        title: '安康码”上新！家庭成员核酸情况查询更便捷',
        url: 'https://ah.ifeng.com/c/8KkGUDhAZNZ',
      },
      {
        title: '安康码”上新！家庭成员核酸情况查询更便捷',
        url: 'https://ah.ifeng.com/c/8KkGUDhAZNZ',
      },
    ],
  },
];
function createTab(type, content) {
  for (let i = 0; i < cates.length; i++) {
    const btn = document.createElement('button');
    btn.textContent = cates[i].cname;
    btn.dataset.key = cates[i].cid;
    if (i === 0) btn.classList.add('active');
    type.append(btn);
  }
  // 2. 生成内容
  for (let i = 0; i < details.length; i++) {
    const ul = document.createElement('ul');
    ul.dataset.key = details[i].cid;
    ul.classList.add(i === 0 ? 'active' : 'hidden');
    for (let k = 0; k < details[i].content.length; k++) {
      const li = document.createElement('li');
      const a = document.createElement('a');
      a.href = details[i].content[k].url;
      a.textContent = details[i].content[k].title;
      li.append(a);
      ul.append(li);
      content.append(ul);
    }
  }
}
function setBtnStatus(ev) {
  const currentBtn = ev.target;
  [...ev.currentTarget.children].forEach(btn => btn.classList.remove('active'));
  currentBtn.classList.add('active');
}
function setContentStatus(ev, currentBtn) {
  const lists = document.querySelectorAll('.content > ul');
  lists.forEach(list => list.classList.replace('active', 'hidden'));
  const currentList = [...lists].find(list => list.dataset.key == currentBtn.dataset.key);
  currentList.classList.replace('hidden', 'active');
}
export { createTab, setBtnStatus, setContentStatus };

JS代码部分

相关文章