第六题小demo-Tab选项卡案例

小黑子史蒂夫

已于 2023-01-17 20:10:43 修改

阅读量257

点赞数

分类专栏：前端三剑客小demo 文章标签：前端

于 2023-01-16 19:17:52 首次发布

本文链接：https://blog.csdn.net/VanWot/article/details/128703739

版权

前端三剑客小demo 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

小黑子的Tab选项卡案例

需求：

1.选项卡由英雄联盟、DOTA、风暴英雄、300英雄四块组成;
2.未选择时，默认选中第一个标签页;
3.选择某一选项后，下方跳出对应游戏的相关介绍内容。

实现原理：

对于我的Tab选项卡其实就是ul li结构用弹性盒子布局实现横向排列，需要注意的是要在头部部分设置flex: 1 作用于将头部展开铺满，这样就可以快速实现选项卡四块组成
默认选择时，开始给每个li加display:none，再第一个加active——block可以实现默认选中第一个标签页效果，切换再用js的for循环实现
js的for循环中，给每个头部li设置自定义属性加索引，在点击时获取属性给外部函数执行，对每一个li的active先移除一遍，在点击时加active，这样就可以实现点击切换下方跳出对应游戏的相关介绍内容的效果

html部分

<!DOCTYPE html>
<html lang="en">
<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>
    <link rel="stylesheet" href="./Tab选项关卡css.css">
    <script src="./Tab选项关卡js.js"></script>
</head>
<body>
    <ul class="header">
        <li class="active">英雄联盟</li>
        <li>DOTA</li>
        <li>风暴英雄</li>
        <li>300英雄</li>
      </ul>
      <ul class="box">
        <li class="active">
            《英雄联盟》（League of Legends，简称LOL）是由美国拳头游戏（Riot Games）开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系统。
        </li>

        <li>
            《DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。
        </li>

        <li>
            《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。
            游戏中的英雄角色主要来自于暴雪四大经典游戏系列：《魔兽世界》、《暗黑破坏神》、《星际争霸》和《守望先锋》。它是一款道具收费的游戏，与《星际争霸Ⅱ》基于同一引擎开发。
        </li>

        <li>
            《300英雄》是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法。
        </li>
      </ul>
</body>
</html>

css部分：

* {
    margin: 0;
    padding: 0;
  }

  ul {
    list-style: none;
  }

  .header {
    display: flex;
    width: 1000px;
    margin: 0 auto;
  }

  .header li {
    flex: 1;/* 作用于将弹性盒子展开铺满 */
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-bottom: 2px solid red;
  }

  .box {
    width: 1000px;
    position: relative;
    margin: 0 auto;
  }

  .box li{
    position: absolute;
    left: 0;
    top: 0;
    height: 500px;
    display: none;
    padding-top: 100px;
    text-align: center;
    color: aliceblue;
  }

  .box li:nth-of-type(1){
    background-image: url(./英雄联盟.jpg);
    background-size: cover;
  }
  .box li:nth-of-type(2){
    background-image: url(./DOTA.jpg);
    background-size: cover;
  }
  .box li:nth-of-type(3){
    background-image: url(./风暴英雄.jpg);
    background-size: cover;
  }
  .box li:nth-of-type(4){
    background-image: url(./300英雄.jpg);
    background-size: cover;
  }

  .header .active {
    background-color: yellowgreen;
  }

  .box .active {
    display: block;
    /* 与li的display: none呼应，实现点击切换的效果 */
  }

js部分：

window.onload = function(){
    var oheader = document.querySelectorAll(".header li");
    var obox = document.querySelectorAll(".box li");
    for (var i = 0; i < oheader.length; i++)
     {
      //在for循环中，给每个头部li设置自定义属性加索引，在点击时获取属性给外部函数执行
      oheader[i].dataset.index = i;
      //为了防止没点之前就执行完，将点击执行在外部
      oheader[i].onclick = handler;
    }
    //在外部定义
    function handler() 
    {
      var index = this.dataset.index; //this实现点击返回的是当前这一项，再利用dataset.index就可以知道点击时，是第几个
      for (var j = 0; j < oheader.length; j++) //对每一个的active先移除一遍，在点击时加active
      {
        oheader[j].classList.remove("active");
        obox[j].classList.remove("active");
      }

      oheader[index].classList.add("active");
      obox[index].classList.add("active");
    }
}