Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 选项卡案例
Blogger Information
Blog 28
fans 0
comment 0
visits 11629
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
选项卡案例
子墨吖ฅฅ
Original
457 people have browsed it
  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.       /* 隐藏 */
  10.       .hidden {
  11.         display: none;
  12.       }
  14.       /* 显示 */
  15.       .active {
  16.         display: block;
  17.       }
  19.       .type > *.active,
  20.       .content > *.active {
  21.         background-color: lightgreen;
  22.       }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <div class="box">
  27.       <div class="type" style="display: flex"></div>
  28.       <div class="content"></div>
  29.     </div>
  31.     <script type="module">
  32.       import * as tabs from './modules/tabs.js';
  33.       const type = document.querySelector('.type');
  34.       const content = document.querySelector('.content');
  35.       window.onload = () => tabs.createTab(type, content);
  36.       type.onclick = ev => {
  37.         tabs.setContentStatus(ev, ev.target);
  38.       };
  39.     </script>
  40.   </body>
  41. </html>

JS代码部分

  1. // * 栏目数据
  2. const cates = [
  3.   { cid: 1, cname: '国际新闻' },
  4.   { cid: 2, cname: '中国新闻' },
  5.   { cid: 3, cname: '安徽新闻' },
  6. ];
  8. // * 列表数据
  9. const details = [
  10.   {
  11.     key: 1,
  12.     cid: 1,
  13.     content: [
  14.       {
  15.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  16.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  17.       },
  18.       {
  19.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  20.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  21.       },
  22.       {
  23.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  24.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  25.       },
  26.     ],
  27.   },
  28.   {
  29.     key: 2,
  30.     cid: 2,
  31.     content: [
  32.       {
  33.         title: '空战隐身无人僚机亮相！',
  34.         url: 'https://news.ifeng.com/c/8KoeDFJXF1b',
  35.       },
  36.       {
  37.         title: '空战隐身无人僚机亮相！',
  38.         url: 'https://news.ifeng.com/c/8KoeDFJXF1b',
  39.       },
  40.       {
  41.         title: '空战隐身无人僚机亮相！',
  42.         url: 'https://news.ifeng.com/c/8KoeDFJXF1b',
  43.       },
  44.     ],
  45.   },
  46.   {
  47.     key: 3,
  48.     cid: 3,
  49.     content: [
  50.       {
  51.         title: '安康码”上新！家庭成员核酸情况查询更便捷',
  52.         url: 'https://ah.ifeng.com/c/8KkGUDhAZNZ',
  53.       },
  54.       {
  55.         title: '安康码”上新！家庭成员核酸情况查询更便捷',
  56.         url: 'https://ah.ifeng.com/c/8KkGUDhAZNZ',
  57.       },
  58.       {
  59.         title: '安康码”上新！家庭成员核酸情况查询更便捷',
  60.         url: 'https://ah.ifeng.com/c/8KkGUDhAZNZ',
  61.       },
  62.     ],
  63.   },
  64. ];
  66. function createTab(type, content) {
  67.   for (let i = 0; i < cates.length; i++) {
  68.     const btn = document.createElement('button');
  69.     btn.textContent = cates[i].cname;
  70.     btn.dataset.key = cates[i].cid;
  71.     if (i === 0) btn.classList.add('active');
  72.     type.append(btn);
  73.   }
  74.   // 2. 生成内容
  75.   for (let i = 0; i < details.length; i++) {
  76.     const ul = document.createElement('ul');
  77.     ul.dataset.key = details[i].cid;
  78.     ul.classList.add(i === 0 ? 'active' : 'hidden');
  80.     for (let k = 0; k < details[i].content.length; k++) {
  81.       const li = document.createElement('li');
  82.       const a = document.createElement('a');
  83.       a.href = details[i].content[k].url;
  84.       a.textContent = details[i].content[k].title;
  85.       li.append(a);
  86.       ul.append(li);
  87.       content.append(ul);
  88.     }
  89.   }
  90. }
  92. function setBtnStatus(ev) {
  93.   const currentBtn = ev.target;
  94.   [...ev.currentTarget.children].forEach(btn => btn.classList.remove('active'));
  95.   currentBtn.classList.add('active');
  96. }
  98. function setContentStatus(ev, currentBtn) {
  99.   const lists = document.querySelectorAll('.content > ul');
  100.   lists.forEach(list => list.classList.replace('active', 'hidden'));
  101.   const currentList = [...lists].find(list => list.dataset.key == currentBtn.dataset.key);
  102.   currentList.classList.replace('hidden', 'active');
  103. }
  104. export { createTab, setBtnStatus, setContentStatus };
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：完成的不错
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post