选项卡案例 - php学习 - php中文网博客

首页 > 博客列表 > 选项卡案例

博主信息

博文 24

粉丝 0

访问量 17219

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

选项卡案例

皮皮志

原创

1038人浏览过

<!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 };

批改老师：

PHPz

批改状态：合格

老师批语：完成的不错

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

开学第一课 10.13

2022-10-13 23:16:31