search

博客列表 >选项卡案例

选项卡案例

皮皮志
皮皮志原创
2022年11月11日 15:56:00573浏览
  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>Document</title>
  8.     <style>
  9.         body{
  10.             font: 14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;
  11.         }
  12.         /* 隐藏 */
  13.         .hidden {
  14.           display: none;
  15.         }
  17.         /* 显示 */
  18.         .active {
  19.           display: block;
  20.         }
  22.         .type > *.active,
  23.         .content > *.active {
  24.           background-color: lightgreen;
  25.         }
  26.         a img{
  27.             width: 224px;
  28.     height: 128px;
  29.     border-radius: 6px 6px 0px 0px;
  30.     transition: all 0.2s;
  32.         }
  33.         li{
  34.             list-style: none;
  35.         }
  36.         a{
  37.             text-decoration: none;
  38.         }
  39.         .content .active{
  40.             display: grid;
  41.             grid-template-columns: repeat(4,1fr);
  42.             gap: 10px;
  43.             place-items: center;
  44.         }
  45.         .content .active li{
  46.            margin-top: 40px;
  47.            border: 1px solid white;
  48.         }
  49.         .content .active  a{
  50.             display:grid;
  51.             grid-template-rows: repeat(2,1fr);
  52.             width: 224px;
  53.             height: 180px;
  54.         }
  55.       </style>
  56. </head>
  57. <body>
  58.     <div class="box">
  59.         <!-- 栏目 -->
  60.         <div class="type" style="display: flex; place-content: space-around;"></div>
  61.         <!-- 内容 -->
  62.         <div class="content"></div>
  63.     </div>
  64.     <script type="module">
  65.         import * as tabs  from './table.js';
  66.         const type = document.querySelector('.type');
  67.       const content = document.querySelector('.content');
  68.       window.onload = ()=>tabs.createTab(type, content)
  70.       type.onclick = ev => {
  71.         tabs.setBtnStatus(ev);
  72.         tabs.setContentStatus(ev, ev.target);
  73.       };
  74.     </script>
  75. </body>
  76. </html>
  1. // 创建栏目
  2. const cates = [
  3.     {cid: 1, cname: '最新' },
  4.     {cid: 2, cname: '工具下载' },
  5.     {cid: 3, cname: 'js特效' },
  6.     {cid: 4, cname: '网站源码/模板' },
  7.     {cid: 5, cname: '网站素材' },
  8.     {cid: 6, cname: '学习资源' }
  9. ]
  11. // 创建列表数据
  12. const details = [
  13.  {
  14.     key: 1,
  15.     cid: 1,
  16.  content: [
  17.     {
  18.       title: '涂鸦风格箭头结合矢量素材(eps+png)',
  19.       url: 'https://www.php.cn/xiazai/sucai/2424',
  20.       pic:"/tp/1.jpg"
  21.     },
  22.     {
  23.       title: '俄罗斯宣布从赫尔松部分地区撤军',
  24.       url: 'https://news.ifeng.com/c/8KoK54urn1k',
  25.       pic:'/tp/2.png'
  26.     },
  27.     {
  28.       title: '俄罗斯宣布从赫尔松部分地区撤军',
  29.       url: 'https://news.ifeng.com/c/8KoK54urn1k',
  30.       pic:'/tp/3.jpg'
  31.     },
  32.     {
  33.         title: '涂鸦风格箭头结合矢量素材(eps+png)',
  34.         url: 'https://www.php.cn/xiazai/sucai/2424',
  35.         pic:"/tp/4.png"
  36.     },
  37.     {
  38.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  39.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  40.         pic:'/tp/5.jpg'
  41.     },
  42.     {
  43.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  44.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  45.         pic:'/tp/6.png'
  46.     },
  47.     {
  48.         title: '涂鸦风格箭头结合矢量素材(eps+png)',
  49.         url: 'https://www.php.cn/xiazai/sucai/2424',
  50.         pic:"/tp/7.jpg"
  51.     },
  52.     {
  53.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  54.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  55.         pic:'/tp/8.png'
  56.     }
  57.   ],
  58. },
  59. {
  60.     key: 2,
  61.     cid: 2,
  62.  content: [
  63.     {
  64.       title: '影子变异图形创意动画特效',
  65.       url: 'https://www.php.cn/xiazai/sucai/2424',
  66.       pic:"https://img.php.cn/upload/webpage/000/287/557/636da89395665526.png"
  67.     },
  68.     {
  69.       title: '俄罗斯宣布从赫尔松部分地区撤军',
  70.       url: 'https://news.ifeng.com/c/8KoK54urn1k',
  71.       pic:'https://img.php.cn/upload/jscode/000/287/557/636da6bdf146b191.jpg'
  72.     },
  73.     {
  74.       title: '俄罗斯宣布从赫尔松部分地区撤军',
  75.       url: 'https://news.ifeng.com/c/8KoK54urn1k',
  76.       pic:'https://img.php.cn/upload/jscode/000/287/557/636da3f839de0151.png'
  77.     },
  78.     {
  79.         title: '涂鸦风格箭头结合矢量素材(eps+png)',
  80.         url: 'https://www.php.cn/xiazai/sucai/2424',
  81.         pic:"https://img.php.cn/upload/jscode/000/000/164/636cbe7f2631b134.jpg"
  82.     },
  83.     {
  84.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  85.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  86.         pic:'https://img.php.cn/upload/webpage/000/287/557/636c559e1bb5a646.png'
  87.     },
  88.     {
  89.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  90.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  91.         pic:'https://img.php.cn/upload/webcode/000/287/557/62cb7ffe70ac6757.png'
  92.     },
  93.     {
  94.         title: '涂鸦风格箭头结合矢量素材(eps+png)',
  95.         url: 'https://www.php.cn/xiazai/sucai/2424',
  96.         pic:"https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png"
  97.     },
  98.     {
  99.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  100.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  101.         pic:'https://img.php.cn/upload/webcode/000/000/164/634e3f8d3e143257.jpg'
  102.     }
  103.   ],
  104. },
  105. {
  106.     key: 3,
  107.     cid: 3,
  108.  content: [
  109.     {
  110.       title: '涂鸦风格箭头结合矢量素材(eps+png)',
  111.       url: 'https://www.php.cn/xiazai/sucai/2424',
  112.       pic:"https://img.php.cn/upload/webpage/000/287/557/636da89395665526.png"
  113.     },
  114.     {
  115.       title: '俄罗斯宣布从赫尔松部分地区撤军',
  116.       url: 'https://news.ifeng.com/c/8KoK54urn1k',
  117.       pic:'https://img.php.cn/upload/jscode/000/287/557/636da6bdf146b191.jpg'
  118.     },
  119.     {
  120.       title: '俄罗斯宣布从赫尔松部分地区撤军',
  121.       url: 'https://news.ifeng.com/c/8KoK54urn1k',
  122.       pic:'https://img.php.cn/upload/jscode/000/287/557/636da3f839de0151.png'
  123.     },
  124.     {
  125.         title: '涂鸦风格箭头结合矢量素材(eps+png)',
  126.         url: 'https://www.php.cn/xiazai/sucai/2424',
  127.         pic:"https://img.php.cn/upload/jscode/000/000/164/636cbe7f2631b134.jpg"
  128.     },
  129.     {
  130.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  131.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  132.         pic:'https://img.php.cn/upload/webpage/000/287/557/636c559e1bb5a646.png'
  133.     },
  134.     {
  135.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  136.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  137.         pic:'https://img.php.cn/upload/webcode/000/287/557/62cb7ffe70ac6757.png'
  138.     },
  139.     {
  140.         title: '涂鸦风格箭头结合矢量素材(eps+png)',
  141.         url: 'https://www.php.cn/xiazai/sucai/2424',
  142.         pic:"https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png"
  143.     },
  144.     {
  145.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  146.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  147.         pic:'https://img.php.cn/upload/webcode/000/000/164/634e3f8d3e143257.jpg'
  148.     }
  149.   ],
  150. },
  151. {
  152.     key: 4,
  153.     cid: 4,
  154.  content: [
  155.     {
  156.       title: '涂鸦风格箭头结合矢量素材(eps+png)',
  157.       url: 'https://www.php.cn/xiazai/sucai/2424',
  158.       pic:"https://img.php.cn/upload/webpage/000/287/557/636da89395665526.png"
  159.     },
  160.     {
  161.       title: '俄罗斯宣布从赫尔松部分地区撤军',
  162.       url: 'https://news.ifeng.com/c/8KoK54urn1k',
  163.       pic:'https://img.php.cn/upload/jscode/000/287/557/636da6bdf146b191.jpg'
  164.     },
  165.     {
  166.       title: '俄罗斯宣布从赫尔松部分地区撤军',
  167.       url: 'https://news.ifeng.com/c/8KoK54urn1k',
  168.       pic:'https://img.php.cn/upload/jscode/000/287/557/636da3f839de0151.png'
  169.     },
  170.     {
  171.         title: '涂鸦风格箭头结合矢量素材(eps+png)',
  172.         url: 'https://www.php.cn/xiazai/sucai/2424',
  173.         pic:"https://img.php.cn/upload/jscode/000/000/164/636cbe7f2631b134.jpg"
  174.     },
  175.     {
  176.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  177.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  178.         pic:'https://img.php.cn/upload/webpage/000/287/557/636c559e1bb5a646.png'
  179.     },
  180.     {
  181.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  182.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  183.         pic:'https://img.php.cn/upload/webcode/000/287/557/62cb7ffe70ac6757.png'
  184.     },
  185.     {
  186.         title: '涂鸦风格箭头结合矢量素材(eps+png)',
  187.         url: 'https://www.php.cn/xiazai/sucai/2424',
  188.         pic:"https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png"
  189.     },
  190.     {
  191.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  192.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  193.         pic:'https://img.php.cn/upload/webcode/000/000/164/634e3f8d3e143257.jpg'
  194.     }
  195.   ],
  196. },
  197. {
  198.     key: 5,
  199.     cid: 5,
  200.  content: [
  201.     {
  202.       title: '涂鸦风格箭头结合矢量素材(eps+png)',
  203.       url: 'https://www.php.cn/xiazai/sucai/2424',
  204.       pic:"https://img.php.cn/upload/webpage/000/287/557/636da89395665526.png"
  205.     },
  206.     {
  207.       title: '俄罗斯宣布从赫尔松部分地区撤军',
  208.       url: 'https://news.ifeng.com/c/8KoK54urn1k',
  209.       pic:'https://img.php.cn/upload/jscode/000/287/557/636da6bdf146b191.jpg'
  210.     },
  211.     {
  212.       title: '俄罗斯宣布从赫尔松部分地区撤军',
  213.       url: 'https://news.ifeng.com/c/8KoK54urn1k',
  214.       pic:'https://img.php.cn/upload/jscode/000/287/557/636da3f839de0151.png'
  215.     },
  216.     {
  217.         title: '涂鸦风格箭头结合矢量素材(eps+png)',
  218.         url: 'https://www.php.cn/xiazai/sucai/2424',
  219.         pic:"https://img.php.cn/upload/jscode/000/000/164/636cbe7f2631b134.jpg"
  220.     },
  221.     {
  222.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  223.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  224.         pic:'https://img.php.cn/upload/webpage/000/287/557/636c559e1bb5a646.png'
  225.     },
  226.     {
  227.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  228.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  229.         pic:'https://img.php.cn/upload/webcode/000/287/557/62cb7ffe70ac6757.png'
  230.     },
  231.     {
  232.         title: '涂鸦风格箭头结合矢量素材(eps+png)',
  233.         url: 'https://www.php.cn/xiazai/sucai/2424',
  234.         pic:"https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png"
  235.     },
  236.     {
  237.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  238.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  239.         pic:'https://img.php.cn/upload/webcode/000/000/164/634e3f8d3e143257.jpg'
  240.     }
  241.   ],
  242. },
  243. {
  244.     key: 6,
  245.     cid: 6,
  246.  content: [
  247.     {
  248.       title: '涂鸦风格箭头结合矢量素材(eps+png)',
  249.       url: 'https://www.php.cn/xiazai/sucai/2424',
  250.       pic:"https://img.php.cn/upload/webpage/000/287/557/636da89395665526.png"
  251.     },
  252.     {
  253.       title: '俄罗斯宣布从赫尔松部分地区撤军',
  254.       url: 'https://news.ifeng.com/c/8KoK54urn1k',
  255.       pic:'https://img.php.cn/upload/jscode/000/287/557/636da6bdf146b191.jpg'
  256.     },
  257.     {
  258.       title: '俄罗斯宣布从赫尔松部分地区撤军',
  259.       url: 'https://news.ifeng.com/c/8KoK54urn1k',
  260.       pic:'https://img.php.cn/upload/jscode/000/287/557/636da3f839de0151.png'
  261.     },
  262.     {
  263.         title: '涂鸦风格箭头结合矢量素材(eps+png)',
  264.         url: 'https://www.php.cn/xiazai/sucai/2424',
  265.         pic:"https://img.php.cn/upload/jscode/000/000/164/636cbe7f2631b134.jpg"
  266.     },
  267.     {
  268.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  269.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  270.         pic:'https://img.php.cn/upload/webpage/000/287/557/636c559e1bb5a646.png'
  271.     },
  272.     {
  273.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  274.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  275.         pic:'https://img.php.cn/upload/webcode/000/287/557/62cb7ffe70ac6757.png'
  276.     },
  277.     {
  278.         title: '涂鸦风格箭头结合矢量素材(eps+png)',
  279.         url: 'https://www.php.cn/xiazai/sucai/2424',
  280.         pic:"https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png"
  281.     },
  282.     {
  283.         title: '俄罗斯宣布从赫尔松部分地区撤军',
  284.         url: 'https://news.ifeng.com/c/8KoK54urn1k',
  285.         pic:'https://img.php.cn/upload/webcode/000/000/164/634e3f8d3e143257.jpg'
  286.     }
  287.   ],
  288. }
  289. ]
  292. // 创建样目和对应的内容区
  294. function createTab(type, content) {
  295.     // 1. 生成样目
  296.     for (let i = 0; i < cates.length; i++) {
  297.       // (1) 创建一个按钮
  298.       const btn = document.createElement('button');
  299.       // (2) 设置按钮的文本
  300.       btn.textContent = cates[i].cname;
  301.       // (3) 给按钮添加一个自定义 data-key, 主要是为了一内容id绑定
  302.       btn.dataset.key = cates[i].cid;
  303.       // (4) 默认高亮第1个,所以第一个加上class="active"
  304.       if (i === 0) btn.classList.add('active');
  305.       // (5) 将新按钮, 添加到栏目容器元素中 type
  306.       type.append(btn);
  307.     }
  308.     // 2. 生成内容
  309.     for (let i = 0; i < details.length; i++) {
  310.       // (1) 创建列表 <ul>
  311.       const ul = document.createElement('ul');
  312.       // (2) 添加列表索引<ul data-key>
  313.       ul.dataset.key = details[i].cid;
  314.       // (3) 默认显示第1个,其它隐藏
  315.       ul.classList.add(i === 0 ? 'active' : 'hidden');
  317.       // (4) 生成子元素<li><a>用于显示每一条数据
  318.       for (let k = 0; k < details[i].content.length; k++) {
  319.         // 1. 生成 <li>
  320.         const li = document.createElement('li');
  321.         // 2. 生成 <a>
  322.         const a = document.createElement('a');
  323.         const img = document.createElement('img');
  324.         img.src = details[i].content[k].pic;
  325.         // 3. a.href
  326.         a.href = details[i].content[k].url;
  327.         // 4. a.textContent
  328.         a.textContent = details[i].content[k].title;
  329.         a.insertAdjacentElement('afterbegin',img)
  330.         // 5. 将<a>添加到<li>
  331.         li.append(a);
  332.         // 6. <li>添加到<ul>
  333.         ul.append(li);
  334.         // 7. <ul>添加到内容容器中.content
  335.         content.append(ul);
  336.       }
  337.     }
  338.   }
  342. // 设置按钮高亮
  343. function setBtnStatus(ev) {
  344.     // 1. 当前按钮
  345.     const currentBtn = ev.target;
  347.     // 2. 去掉所有按钮的active, 遍历
  348.     // ev.currentTarget: 事件绑定主体 , 父元素
  349.     [...ev.currentTarget.children].forEach(btn => btn.classList.remove('active'));
  351.     // 3. 设置当前按钮高亮
  352.     currentBtn.classList.add('active');
  353.   }
  355.   // 设置内容状态: 与按钮对应的内容显示出来
  356.   function setContentStatus(ev, currentBtn) {
  357.     // 1. 获取所有列表
  358.     const lists = document.querySelectorAll('.content > ul');
  360.     // 2. 去掉所有列表active,换成hidden
  361.     lists.forEach(list => list.classList.replace('active', 'hidden'));
  363.     // 3. 找到与栏目key对应的列表
  364.     // lists: NodeList对象, 不是数组
  365.     const currentList = [...lists].find(list => list.dataset.key == currentBtn.dataset.key);
  366.     // 返回当前应该高亮显示的列表
  368.     // 4. 将要显示的列表,加上active,显示出来
  369.     currentList.classList.replace('hidden', 'active');
  370.   }
  371.   export { createTab, setBtnStatus, setContentStatus };
上一条：选项卡案例下一条：留言板案例,添加CSS美化
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多