Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 模仿完成选项卡
Blogger Information
Blog 7
fans 0
comment 0
visits 2142
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
模仿完成选项卡
P粉276126820
Original
238 people have browsed it

选项卡用模块形式

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}

效果

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