经典选项卡

<!DOCTYPE html>
<html lang="en">
<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: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="bt" style="display: flex;"></div>
        <div class="nr"></div>
    </div>
    <script type="module">
        // 导入模块
        import * as tabs from './js/zuoye.js'
        // 1.获取栏目，内容容器元素
        const bt = document.querySelector('.bt')
        const nr = document.querySelector('.nr')
        // 2.页面加载完成，创建栏目和对应的内容
        // 自动生成栏目和内容数据
        window.onload= () => tabs.createTab(bt, nr)
        // 3.点击栏目时，设置按钮的状态，与按钮对应的内容的状态，时间委托
        bt.onclick = ev => {
            // 当前按钮高亮
            tabs.setBtnStatus(ev)
            // 与按钮对应的内容显示出来，当前按钮= ev.target 
            tabs.setContentStatus(ev, ev.target)
        }
    </script>
</body>
</html>

// * 栏目数据
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(bt, nr){
    // 1.生成栏目
    for(let i = 0; i < cates.length; i++){
        // 创建一个按钮
        const btn = document.createElement('button')
        // 设置按钮的文本
        btn.textContent = cates[i].cname
        // 给按钮一个自定义data=key,用来内容ID绑定
        btn.dataset.key = cates[i].cid
        // 默认高亮第一个，给第一个加上active，i绝对等于索引0就是第一个
        if (i === 0) btn.classList.add('active')
        // 将按钮添加到栏目容器中
        bt.append(btn)
    }
    // 生成内容
    for (let i = 0; i < details.length; i++){
        // 创建UL列表
        const ul = document.createElement('ul')
        // 添加列表索引 《ul data-key》、
        ul.dataset.key = details[i].cid
        // 默认显示第一个，其他隐藏,三元运算符
        ul.classList.add(i === 0 ?'active':'hidden')
        // 生成子元素li和a，用来显示每一条数据
        for(let k = 0; k < details[i].content.length;k++){
            // 生成li
            const li = document.createElement('li')
            // 生成a
            const a = document.createElement('a')
            // a属性 href
            a.href = details[i].content[k].url
            // a标签的文本
            a.textContent = details[i].content[k].title
            // 将a添加到li
            li.append(a)
            // 将li添加到ul
            ul.append(li)
            // ul添加到容器
            nr.append(ul)
            }
    }
}
// 设置按钮高亮
function setBtnStatus(ev){
    // 当前按钮
    const currentBtn = ev.target;
    // 去掉所有按钮得active,遍历
    // ev.currentTarget:事情绑定得主体
    [...ev.currentTarget.children].forEach(btn => btn.classList.remove('active'))
    // 设置当前按钮高亮
    currentBtn.classList.add('active')
}
// 设置内容状态：与按钮对应得内容显示出来
function setContentStatus(ev, currentBtn){
    // 获取所有列表
    const lists = document.querySelectorAll('.nr > ul')
    // 去掉所有列表active,换成hidden
    lists.forEach(list => list.classList.replace('active', 'hidden'))
    // 找到与栏目key对应得列表
    // lists不是真数组，得换成真数组才能使用find
    const currentList = [...lists].find(list => list.dataset.key == currentBtn.dataset.key)
    // 将要显示得列表，加上active，显示出来
    currentList.classList.replace('hidden', 'active')
}
export {createTab, setBtnStatus,setContentStatus}

相关文章