模仿完成选项卡

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
选项卡用模块形式
HTML
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>选项卡</title>
  8.     <style>
  9.         .hidden{
  10.             display: none;
  11.         }
  12.         .active{
  13.             display:block
  14.         }
  15.         .type > *.active,
  16.         .content > *.active{
  17.             background-color: burlywood;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="box">
  23.         <div class="type" style="display: flex">
  25.         </div>
  26.         <div class="content">
  28.         </div>
  29.     </div>
  30. </body>
  31. <script type="module">
  32.     import * as tabs from './tabs.js'
  33.         // console.log(cates)
  34.         // console.log(details)
  35.         const type = document.querySelector('.type');
  36.         const content = document.querySelector('.content');
  37.         window.onload = tabs.createTab(type,content)
  39.         type.onclick = ev => {
  40.             // 1. 设置栏目高亮
  41.             console.log(111);
  42.             tabs.setBtnStatus(ev)
  43.             // 2. 激活与当前栏目对应的新闻列表
  44.              tabs.setContentStatus(ev.target)
  45.         }
  46. </script>
  47. </html>
JS
  1. // 1. 栏目
  2. const cates = [
  3.     { cid: 1, cname: '中国新闻' },
  4.     { cid: 2, cname: '国际新闻' },
  5.     { cid: 3, cname: '安徽新闻' },
  6.   ]
  8.   // 2. 内容
  9.   // 内容的key 必须与 栏目的id绑定
  10.   const details = [
  11.     {
  12.       key: 1,
  13.       cid: 1,
  14.       content: [
  15.         {
  16.           title: '蔡英文窜美，美官员警告中国不要过度反应，外交部回应',
  17.           url: 'https://news.ifeng.com/c/8OYFjT9c3KM',
  18.         },
  19.         {
  20.           title: '马英九：从来没有一次像今天受到这么大的冲击',
  21.           url: 'https://news.ifeng.com/c/8OYI5PZyyRs',
  22.         },
  23.         {
  24.           title: '美媒：王毅与沙利文进行电话交谈',
  25.           url: 'https://news.ifeng.com/c/8OXw5JWvnRM',
  26.         },
  27.       ],
  28.     },
  29.     {
  30.       key: 2,
  31.       cid: 2,
  32.       content: [
  33.         {
  34.           title: '美核航母抵韩，半岛局势会失控吗？',
  35.           url: 'https://news.ifeng.com/c/8OYApVnV1mN',
  36.         },
  37.         {
  38.           title: '西班牙法律允许强占住房：有华人3年没回西班牙，房子被吉普赛人占了',
  39.           url: 'https://news.ifeng.com/c/8OXfZLPso8P',
  40.         },
  41.         {
  42.           title: '拜登首次就普京拟在白俄部署核武器表态',
  43.           url: 'https://news.ifeng.com/c/8OXdmTTNQD6',
  44.         },
  45.       ],
  46.     },
  47.     {
  48.       key: 3,
  49.       cid: 3,
  50.       content: [
  51.         {
  52.           title: '省级党政代表团密集赴皖考察！安徽究竟有何看点？',
  53.           url: 'https://ah.ifeng.com/c/8OXtD8eq0pA',
  54.         },
  55.         {
  56.           title: '合肥、蚌埠、亳州、安庆、宣城最新人事任免！',
  57.           url: 'https://ah.ifeng.com/c/8OXnxW9z3K5',
  58.         },
  59.         {
  60.           title: '下月起合肥坐高铁到香港！最快只需7时26分',
  61.           url: 'https://ah.ifeng.com/c/8OXheuq5n55',
  62.         },
  63.       ],
  64.     },
  65.   ]
  66.   // 3. 创建栏目和内容
  67.   function createTab(type,content){
  68.      // 1. 生成栏目
  69.     for(let i=0;i<cates.length;i++){
  70.     let typ_bnt = document.createElement('button')
  71.         typ_bnt.dataset.key=cates[i].cid
  72.         typ_bnt.textContent=cates[i].cname
  73.          // 第一个按钮应该是高亮显示
  74.         if(i===0){
  75.             typ_bnt.classList.add('active')
  76.         }
  78.         type.append(typ_bnt)
  79.     }
  81.     for(let i=0; i<details.length; i++){
  82.         //创建ul
  83.         const ulList = document.createElement('ul')
  85.         // 为每个<ul>添加自定义属性data-key
  86.         ulList.dataset.key = details[i].cid
  87.         // 全部内容加载时,默认全隐藏,只要显示第一组新闻列表
  88.         ulList.classList.add(i===0  ? 'active' : 'hidden')
  89.         // 循环: 将与列表对应的数据全部渲染出来
  90.         for(let j=0; j < details[i].content.length; j++){
  92.             const liList = document.createElement('li')
  93.             const a = document.createElement('a')
  94.             a.textContent = details[i].content[j].title
  95.             a.href = details[i].content[j].url
  96.             liList.append(a)
  97.             ulList.append(liList)
  98.             content.append(ulList)
  99.         }
  101.     }
  102.   } 
  103.   // 4. 自动设置栏目高亮
  104.   function setBtnStatus(ev){
  105.     // 去掉所有激活样式
  106.       [...ev.currentTarget.children].forEach(btn=>btn.classList.remove('active'))
  107.       // 2. 将当前用户正在点击的按钮添加active
  108.       ev.target.classList.add('active')
  109.   }
  110.   // 5. 设置与栏目对应的内容的激活状态
  111.   function setContentStatus(currentBtn){
  112.     // 所有的新闻列表<ul>
  113.       const ulList = document.querySelectorAll('.content > ul')
  114.     // 1. 将激活的列表全部隐藏 active -> hidden
  115.       ulList.forEach(list=>list.classList.replace('active','hidden'))
  116.     // 2. 找到与栏目ID相同(对应的)新闻列表<ul>
  117.       const curList = [...ulList].find(list=>list.dataset.key===currentBtn.dataset.key)
  118.     // 3. 设置当前列表为激活active
  119.       curList.classList.replace('hidden','active')
  121.   }
  122.   export {cates, details, createTab, setBtnStatus, setContentStatus}
效果

【感谢龙石为本站提供api网关 http://www.longshidata.com/pages/apigateway.html】
更多阅读