Tab选项卡

style部分

把box部分弄好，选项栏和内容部分分开

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .header{
            display: flex;
            width: 500px;

        }
        .header li{
            flex: 1;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid rgb(221, 217, 217);
        }
        .box{
            position: relative;
           
        }
        .box li{
            position: absolute;
            left: 0;
            top: 0;
            width: 500px;
            height: 200px;
            background-color: rgb(241, 238, 238);
            display: none;
        }
        .header .active{
            background-color: rgba(192, 192, 192, 0.772);
        }
        .box .active{
            display: block;
        }
         .box .active img{
            height: 100px;
            padding-left: 100px;
         }
         .boxx{
           padding-left:30% ;
         }
    </style>

div部分

放入内容

<div class="boxx">
        <ul class="header">
            <li class="active">英雄联盟</li>
            <li>DOTA</li>
            <li>风暴英雄</li>
            <li>300英雄</li>
        </ul>
        <ul class="box">
            <li class="active">
                <img src="../图片/英雄联盟.jpg" alt="" >
                <div>《英雄联盟》(League of Legends,简称LOL)是由美国拳头游戏(Riot Games)开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。</div>
            </li>
            <li>
                <img src="../图片/dota.jpeg" alt="">
                <div>《DotA》（Defense of the Ancients）是暴雪公司官方认可的魔兽争霸的RPG地图。</div>
            </li>
            <li>
                <img src="../图片/风暴英雄" alt="">
                <div>《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。</div>
            </li>
            <li>
                <img src="../图片/300" alt="">
                <div>《300英雄》是由上海跳跃网络研发的3D动漫英雄对战网游。</div>
            </li>
        </ul>
    </div>

script部分

把对象弄出来，放点击事件，设置box消失出现状态

 <script>
        var oHeaderItems = document.querySelectorAll(".header li")
        var oBoxItems = document.querySelectorAll(" .box li")
        for(var i=0;i<oHeaderItems.length;i++){
            oHeaderItems[i].dataset.index =i
            oHeaderItems[i].onclick=handler
        }
        function handler(){
            var index=this.dataset.index
            for(var m=0;m<oHeaderItems.length;m++){
                oHeaderItems[m].classList.remove("active")
                oBoxItems[m].classList.remove("active")
            }
            oHeaderItems[index].classList.add("active")
            oBoxItems[index].classList.add("active")
        }
    </script>