实战：选项卡 - - php.cn博客

选项卡

<!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 {
      }
      .active {
        display: block;
      }
      .type > *.active,
      .content > *.active {
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <!-- 1. 栏目组 -->
      <div class="type" style="display: flex"></div>
      <!-- 2. 内容组 -->
      <div class="content"></div>
    </div>
    <script type="module">
      // 导入模块
      import { createTab, setBtnStatus, setContentStatus } from "./modules/zy01.js";
      // 1. 获取栏目,内容容器元素
      const type = document.querySelector(".type");
      const content = document.querySelector(".content");
      // 2. 页面加载完成,创建栏目和对应的内容
      window.onload = () => createTab(type, content);
      // 3. 点击栏目时,设置按钮的状态,与按钮对应的内容的状态
      type.onclick = (ev) => {
        // 1. 当前按钮高亮
        setBtnStatus(ev);
        // 2. 与按钮对应的内容显示出来
        setContentStatus(ev, ev.target);
      };
    </script>
  </body>
</html>

//todo 选项卡的数据以及方法
// 栏目数据
const cates = [
  { cid: 1, cname: "国际新闻" },
  { cid: 2, cname: "中国新闻" },
  { cid: 3, cname: "江苏新闻" },
];
//列表数据
const details = [
  {
    Key: 1,
    cid: 1,
    content: [
      {
        title: "饿罗斯退兵",
        url: "https://www.360kuai.com/pc/detail?url=http%3A%2F%2Fzm.news.so.com%2Fdaef26b096bf7944c16970f96c1ac169&check=76bc8294131d84fb&refer_scene=&tj_url=&ucheck=f5cbfc4258ec56b26c922b3c24b93e82&sign=360_c109fef1&uid=&scene=49001",
      },
    ],
  },
  {
    Key: 2,
    cid: 2,
    content: [
      {
        title: "中国崛起",
        url: "https://www.360kuai.com/pc/detail?url=http%3A%2F%2Fzm.news.so.com%2Fdaef26b096bf7944c16970f96c1ac169&check=76bc8294131d84fb&refer_scene=&tj_url=&ucheck=f5cbfc4258ec56b26c922b3c24b93e82&sign=360_c109fef1&uid=&scene=49001",
      },
    ],
  },
  {
    Key: 3,
    cid: 3,
    content: [
      {
        title: "无锡新闻",
        url: "https://www.360kuai.com/pc/detail?url=http%3A%2F%2Fzm.news.so.com%2Fdaef26b096bf7944c16970f96c1ac169&check=76bc8294131d84fb&refer_scene=&tj_url=&ucheck=f5cbfc4258ec56b26c922b3c24b93e82&sign=360_c109fef1&uid=&scene=49001",
      },
    ],
  },
];
// 创建样目和对应的内容区
function createTab(type, content) {
  // 1. 生成样目
  for (let i = 0; i < cates.length; i++) {
    // (1) 创建一个按钮
    const btn = document.createElement("button");
    // (2) 设置按钮的文本
    btn.textContent = cates[i].cname;
    // (3) 给按钮添加一个自定义 data-key, 主要是为了一内容id绑定
    btn.dataset.key = cates[i].cid;
    // (4) 默认高亮第1个,所以第一个加上class="active"
    if (i === 0) btn.classList.add("active");
    // (5) 将新按钮, 添加到栏目容器元素中 type
    type.append(btn);
  }
  // 2. 生成内容
  for (let i = 0; i < details.length; i++) {
    // (1) 创建列表 <ul>
    const ul = document.createElement("ul");
    // (2) 添加列表索引<ul data-key>
    ul.dataset.key = details[i].cid;
    // (3) 默认显示第1个,其它隐藏
    ul.classList.add(i === 0 ? "active" : "hidden");
    // (4) 生成子元素<li><a>用于显示每一条数据
    for (let k = 0; k < details[i].content.length; k++) {
      // 1. 生成 <li>
      const li = document.createElement("li");
      // 2. 生成 <a>
      const a = document.createElement("a");
      // 3. a.href
      a.href = details[i].content[k].url;
      // 4. a.textContent
      a.textContent = details[i].content[k].title;
      // 5. 将<a>添加到<li>
      li.append(a);
      // 6. <li>添加到<ul>
      ul.append(li);
      // 7. <ul>添加到内容容器中.content
      content.append(ul);
    }
  }
}
// 设置按钮高亮
function setBtnStatus(ev) {
  // 1. 当前按钮
  const currentBtn = ev.target;
  // 2. 去掉所有按钮的active, 遍历
  [...ev.currentTarget.children].forEach((btn) => btn.classList.remove("active"));
  // 3. 设置当前按钮高亮
  currentBtn.classList.add("active");
}
// 设置内容状态: 与按钮对应的内容显示出来
function setContentStatus(ev, currentBtn) {
  // 1. 获取所有列表
  const lists = document.querySelectorAll(".content > ul");
  // 2. 去掉所有列表active,换成hidden
  lists.forEach((list) => list.classList.replace("active", "hidden"));
  // 3. 找到与栏目key对应的列表
  const currentList = [...lists].find((list) => list.dataset.key == currentBtn.dataset.key);
  // 4. 将要显示的列表,加上active,显示出来
  currentList.classList.replace("hidden", "active");
}
export { createTab, setBtnStatus, setContentStatus };

国际新闻中国新闻无锡新闻