选项卡案例 - php学习

Home > List of blog posts > 选项卡案例

Blogger Information

Blog 24

fans 0

comment 0

visits 10965

Special Recommendation

More>

Related recommendations

Related Tutorials

Popular Recommendations

Latest courses

The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

1422670 times of learning
Collection
PHP introductory tutorial one: Learn PHP in one week

4267554 times of learning
Collection
JAVA Beginner's Video Tutorial

2530297 times of learning
Collection

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

选项卡案例

皮皮志

Original

568 people have browsed it

<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
    <style>
        body{
            font: 14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;
        }
        /* 隐藏 */
        .hidden {
          display: none;
        }
        /* 显示 */
        .active {
          display: block;
        }
        .type > *.active,
        .content > *.active {
          background-color: lightgreen;
        }
        a img{
            width: 224px;
    height: 128px;
    border-radius: 6px 6px 0px 0px;
    transition: all 0.2s;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .content .active{
            display: grid;
            grid-template-columns: repeat(4,1fr);
            gap: 10px;
            place-items: center;
        }
        .content .active li{
           margin-top: 40px;
           border: 1px solid white;
        }
        .content .active  a{
            display:grid;
            grid-template-rows: repeat(2,1fr);
            width: 224px;
            height: 180px;
        }
      </style>
</head>
<body>
    <div class="box">
        <!-- 栏目 -->
        <div class="type" style="display: flex; place-content: space-around;"></div>
        <!-- 内容 -->
        <div class="content"></div>
    </div>
    <script type="module">
        import * as tabs  from './table.js';
        const type = document.querySelector('.type');
      const content = document.querySelector('.content');
      window.onload = ()=>tabs.createTab(type, content)
      type.onclick = ev => {
        tabs.setBtnStatus(ev);
        tabs.setContentStatus(ev, ev.target);
      };
    </script>
</body>
</html>

// 创建栏目
const cates = [
    {cid: 1, cname: '最新' },
    {cid: 2, cname: '工具下载' },
    {cid: 3, cname: 'js特效' },
    {cid: 4, cname: '网站源码/模板' },
    {cid: 5, cname: '网站素材' },
    {cid: 6, cname: '学习资源' }
]
// 创建列表数据
const details = [
 {
    key: 1,
    cid: 1,
 content: [
    {
      title: '涂鸦风格箭头结合矢量素材(eps+png)',
      url: 'https://www.php.cn/xiazai/sucai/2424',
      pic:"/tp/1.jpg"
    },
    {
      title: '俄罗斯宣布从赫尔松部分地区撤军',
      url: 'https://news.ifeng.com/c/8KoK54urn1k',
      pic:'/tp/2.png'
    },
    {
      title: '俄罗斯宣布从赫尔松部分地区撤军',
      url: 'https://news.ifeng.com/c/8KoK54urn1k',
      pic:'/tp/3.jpg'
    },
    {
        title: '涂鸦风格箭头结合矢量素材(eps+png)',
        url: 'https://www.php.cn/xiazai/sucai/2424',
        pic:"/tp/4.png"
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'/tp/5.jpg'
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'/tp/6.png'
    },
    {
        title: '涂鸦风格箭头结合矢量素材(eps+png)',
        url: 'https://www.php.cn/xiazai/sucai/2424',
        pic:"/tp/7.jpg"
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'/tp/8.png'
    }
  ],
},
{
    key: 2,
    cid: 2,
 content: [
    {
      title: '影子变异图形创意动画特效',
      url: 'https://www.php.cn/xiazai/sucai/2424',
      pic:"https://img.php.cn/upload/webpage/000/287/557/636da89395665526.png"
    },
    {
      title: '俄罗斯宣布从赫尔松部分地区撤军',
      url: 'https://news.ifeng.com/c/8KoK54urn1k',
      pic:'https://img.php.cn/upload/jscode/000/287/557/636da6bdf146b191.jpg'
    },
    {
      title: '俄罗斯宣布从赫尔松部分地区撤军',
      url: 'https://news.ifeng.com/c/8KoK54urn1k',
      pic:'https://img.php.cn/upload/jscode/000/287/557/636da3f839de0151.png'
    },
    {
        title: '涂鸦风格箭头结合矢量素材(eps+png)',
        url: 'https://www.php.cn/xiazai/sucai/2424',
        pic:"https://img.php.cn/upload/jscode/000/000/164/636cbe7f2631b134.jpg"
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'https://img.php.cn/upload/webpage/000/287/557/636c559e1bb5a646.png'
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'https://img.php.cn/upload/webcode/000/287/557/62cb7ffe70ac6757.png'
    },
    {
        title: '涂鸦风格箭头结合矢量素材(eps+png)',
        url: 'https://www.php.cn/xiazai/sucai/2424',
        pic:"https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png"
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'https://img.php.cn/upload/webcode/000/000/164/634e3f8d3e143257.jpg'
    }
  ],
},
{
    key: 3,
    cid: 3,
 content: [
    {
      title: '涂鸦风格箭头结合矢量素材(eps+png)',
      url: 'https://www.php.cn/xiazai/sucai/2424',
      pic:"https://img.php.cn/upload/webpage/000/287/557/636da89395665526.png"
    },
    {
      title: '俄罗斯宣布从赫尔松部分地区撤军',
      url: 'https://news.ifeng.com/c/8KoK54urn1k',
      pic:'https://img.php.cn/upload/jscode/000/287/557/636da6bdf146b191.jpg'
    },
    {
      title: '俄罗斯宣布从赫尔松部分地区撤军',
      url: 'https://news.ifeng.com/c/8KoK54urn1k',
      pic:'https://img.php.cn/upload/jscode/000/287/557/636da3f839de0151.png'
    },
    {
        title: '涂鸦风格箭头结合矢量素材(eps+png)',
        url: 'https://www.php.cn/xiazai/sucai/2424',
        pic:"https://img.php.cn/upload/jscode/000/000/164/636cbe7f2631b134.jpg"
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'https://img.php.cn/upload/webpage/000/287/557/636c559e1bb5a646.png'
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'https://img.php.cn/upload/webcode/000/287/557/62cb7ffe70ac6757.png'
    },
    {
        title: '涂鸦风格箭头结合矢量素材(eps+png)',
        url: 'https://www.php.cn/xiazai/sucai/2424',
        pic:"https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png"
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'https://img.php.cn/upload/webcode/000/000/164/634e3f8d3e143257.jpg'
    }
  ],
},
{
    key: 4,
    cid: 4,
 content: [
    {
      title: '涂鸦风格箭头结合矢量素材(eps+png)',
      url: 'https://www.php.cn/xiazai/sucai/2424',
      pic:"https://img.php.cn/upload/webpage/000/287/557/636da89395665526.png"
    },
    {
      title: '俄罗斯宣布从赫尔松部分地区撤军',
      url: 'https://news.ifeng.com/c/8KoK54urn1k',
      pic:'https://img.php.cn/upload/jscode/000/287/557/636da6bdf146b191.jpg'
    },
    {
      title: '俄罗斯宣布从赫尔松部分地区撤军',
      url: 'https://news.ifeng.com/c/8KoK54urn1k',
      pic:'https://img.php.cn/upload/jscode/000/287/557/636da3f839de0151.png'
    },
    {
        title: '涂鸦风格箭头结合矢量素材(eps+png)',
        url: 'https://www.php.cn/xiazai/sucai/2424',
        pic:"https://img.php.cn/upload/jscode/000/000/164/636cbe7f2631b134.jpg"
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'https://img.php.cn/upload/webpage/000/287/557/636c559e1bb5a646.png'
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'https://img.php.cn/upload/webcode/000/287/557/62cb7ffe70ac6757.png'
    },
    {
        title: '涂鸦风格箭头结合矢量素材(eps+png)',
        url: 'https://www.php.cn/xiazai/sucai/2424',
        pic:"https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png"
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'https://img.php.cn/upload/webcode/000/000/164/634e3f8d3e143257.jpg'
    }
  ],
},
{
    key: 5,
    cid: 5,
 content: [
    {
      title: '涂鸦风格箭头结合矢量素材(eps+png)',
      url: 'https://www.php.cn/xiazai/sucai/2424',
      pic:"https://img.php.cn/upload/webpage/000/287/557/636da89395665526.png"
    },
    {
      title: '俄罗斯宣布从赫尔松部分地区撤军',
      url: 'https://news.ifeng.com/c/8KoK54urn1k',
      pic:'https://img.php.cn/upload/jscode/000/287/557/636da6bdf146b191.jpg'
    },
    {
      title: '俄罗斯宣布从赫尔松部分地区撤军',
      url: 'https://news.ifeng.com/c/8KoK54urn1k',
      pic:'https://img.php.cn/upload/jscode/000/287/557/636da3f839de0151.png'
    },
    {
        title: '涂鸦风格箭头结合矢量素材(eps+png)',
        url: 'https://www.php.cn/xiazai/sucai/2424',
        pic:"https://img.php.cn/upload/jscode/000/000/164/636cbe7f2631b134.jpg"
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'https://img.php.cn/upload/webpage/000/287/557/636c559e1bb5a646.png'
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'https://img.php.cn/upload/webcode/000/287/557/62cb7ffe70ac6757.png'
    },
    {
        title: '涂鸦风格箭头结合矢量素材(eps+png)',
        url: 'https://www.php.cn/xiazai/sucai/2424',
        pic:"https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png"
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'https://img.php.cn/upload/webcode/000/000/164/634e3f8d3e143257.jpg'
    }
  ],
},
{
    key: 6,
    cid: 6,
 content: [
    {
      title: '涂鸦风格箭头结合矢量素材(eps+png)',
      url: 'https://www.php.cn/xiazai/sucai/2424',
      pic:"https://img.php.cn/upload/webpage/000/287/557/636da89395665526.png"
    },
    {
      title: '俄罗斯宣布从赫尔松部分地区撤军',
      url: 'https://news.ifeng.com/c/8KoK54urn1k',
      pic:'https://img.php.cn/upload/jscode/000/287/557/636da6bdf146b191.jpg'
    },
    {
      title: '俄罗斯宣布从赫尔松部分地区撤军',
      url: 'https://news.ifeng.com/c/8KoK54urn1k',
      pic:'https://img.php.cn/upload/jscode/000/287/557/636da3f839de0151.png'
    },
    {
        title: '涂鸦风格箭头结合矢量素材(eps+png)',
        url: 'https://www.php.cn/xiazai/sucai/2424',
        pic:"https://img.php.cn/upload/jscode/000/000/164/636cbe7f2631b134.jpg"
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'https://img.php.cn/upload/webpage/000/287/557/636c559e1bb5a646.png'
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'https://img.php.cn/upload/webcode/000/287/557/62cb7ffe70ac6757.png'
    },
    {
        title: '涂鸦风格箭头结合矢量素材(eps+png)',
        url: 'https://www.php.cn/xiazai/sucai/2424',
        pic:"https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png"
    },
    {
        title: '俄罗斯宣布从赫尔松部分地区撤军',
        url: 'https://news.ifeng.com/c/8KoK54urn1k',
        pic:'https://img.php.cn/upload/webcode/000/000/164/634e3f8d3e143257.jpg'
    }
  ],
}
]
// 创建样目和对应的内容区
function createTab(type, content) {
    // 1. 生成样目
    for (let i = 0; i < cates.length; i++) {
      // (1) 创建一个按钮
      const btn = document.createElement('button');
      // (2) 设置按钮的文本
      btn.textContent = cates[i].cname;
      // (3) 给按钮添加一个自定义 data-key, 主要是为了一内容id绑定
      btn.dataset.key = cates[i].cid;
      // (4) 默认高亮第1个,所以第一个加上class="active"
      if (i === 0) btn.classList.add('active');
      // (5) 将新按钮, 添加到栏目容器元素中 type
      type.append(btn);
    }
    // 2. 生成内容
    for (let i = 0; i < details.length; i++) {
      // (1) 创建列表 <ul>
      const ul = document.createElement('ul');
      // (2) 添加列表索引<ul data-key>
      ul.dataset.key = details[i].cid;
      // (3) 默认显示第1个,其它隐藏
      ul.classList.add(i === 0 ? 'active' : 'hidden');
      // (4) 生成子元素<li><a>用于显示每一条数据
      for (let k = 0; k < details[i].content.length; k++) {
        // 1. 生成 <li>
        const li = document.createElement('li');
        // 2. 生成 <a>
        const a = document.createElement('a');
        const img = document.createElement('img');
        img.src = details[i].content[k].pic;
        // 3. a.href
        a.href = details[i].content[k].url;
        // 4. a.textContent
        a.textContent = details[i].content[k].title;
        a.insertAdjacentElement('afterbegin',img)
        // 5. 将<a>添加到<li>
        li.append(a);
        // 6. <li>添加到<ul>
        ul.append(li);
        // 7. <ul>添加到内容容器中.content
        content.append(ul);
      }
    }
  }
// 设置按钮高亮
function setBtnStatus(ev) {
    // 1. 当前按钮
    const currentBtn = ev.target;
    // 2. 去掉所有按钮的active, 遍历
    // ev.currentTarget: 事件绑定主体 , 父元素
    [...ev.currentTarget.children].forEach(btn => btn.classList.remove('active'));
    // 3. 设置当前按钮高亮
    currentBtn.classList.add('active');
  }
  // 设置内容状态: 与按钮对应的内容显示出来
  function setContentStatus(ev, currentBtn) {
    // 1. 获取所有列表
    const lists = document.querySelectorAll('.content > ul');
    // 2. 去掉所有列表active,换成hidden
    lists.forEach(list => list.classList.replace('active', 'hidden'));
    // 3. 找到与栏目key对应的列表
    // lists: NodeList对象, 不是数组
    const currentList = [...lists].find(list => list.dataset.key == currentBtn.dataset.key);
    // 返回当前应该高亮显示的列表
    // 4. 将要显示的列表,加上active,显示出来
    currentList.classList.replace('hidden', 'active');
  }
  export { createTab, setBtnStatus, setContentStatus };

Correcting teacher：

PHPz

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

开学第一课 10.13

2022-10-13 23:16:31