实战1: 经典选项卡- 优化

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

<!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>实战1: 经典选项卡- 优化</title>
    <style>
      /* 隐藏 */
      .hidden {
        display: none;
      }
      /* 显示 */
      .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 * as tabs from './modules/tabs.js';
      // 1. 获取栏目,内容容器元素
      const type = document.querySelector('.type');
      const content = document.querySelector('.content');
      // 2. 页面加载完成,创建栏目和对应的内容
      // 自动生成栏目和内容数据
      window.onload = () => tabs.createTab(type, content);
      // 3. 点击栏目时,设置按钮的状态,与按钮对应的内容的状态
      // 事件委托(事件冒泡)
      type.onclick = ev => {
        // 因为存在事件委托,就需要区分不同的事件主体
        // 事件主体有二个: 事件绑定主体, 事件触发主体
        // 绑定主体
        // ev.currentTarget
        // 触发主体
        // ev.target
        // 绑定主体, 是触发主体父级元素
        // 1. 当前按钮高亮
        tabs.setBtnStatus(ev);
        // 2. 与按钮对应的内容显示出来
        // ev.target: 当前按钮
        tabs.setContentStatus(ev, ev.target);
      };
    </script>
  </body>
</html>

JStabs.js

// todo  选项卡的数据以及方法
// * 栏目数据
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) {
  // 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: 事件绑定主体 , 父元素
  [...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对应的列表
  // lists: NodeList对象, 不是数组
  const currentList = [...lists].find(list => list.dataset.key == currentBtn.dataset.key);
  // 返回当前应该高亮显示的列表
  // 4. 将要显示的列表,加上active,显示出来
  currentList.classList.replace('hidden', 'active');
}
export { createTab, setBtnStatus, setContentStatus };