Tap选项卡``` 英雄联盟 DOTA 风暴英雄 300英雄《英雄联盟》（League of Legends，简称LO

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .bigbox{
            width: 500px;
            margin: 0 auto;
        }
        ul{
            list-style:none;
            
        }
        .header{
            display: flex;
            width: 500px;
        }
        .header li {
            flex:1;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border:1px solid black;
        }

        .box {
            position: relative;
        }
        .box li {
            position: absolute;
            left:-250px;
            top:0;
            width: 1000px;
            height: 500px;
            background-color: rgb(199, 190, 166);
            display: none;
        }

        .header .active{
            background-color: pink;
        }
        .box .active{
            display: block;
        }
        .boxpic1{
            width: 800px;
            height: 400px;
            margin: 0 auto;
        }
        .boxpic11{
            width: 800px;
            height: 400px;
        }
        .boxtext{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <ul class="header">
            <li class="active">英雄联盟</li>
            <li>DOTA</li>
            <li>风暴英雄</li>
            <li>300英雄</li>  
        </ul>
        <ul class="box">
            <li class="active">
                <div class="boxpic1">
                    <img class="boxpic11" src="./boxpic11.jpg" alt="">
                </div>
                <p class="boxtext">《英雄联盟》（League of Legends，简称LOL）<br>是由美国拳头游戏（Riot Games）开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系统。</p>
            </li>
            <li>
                <div class="boxpic1">
                    <img class="boxpic11" src="./boxpic12.jpg" alt="">
                </div>
                <p class="boxtext">《刀塔2》也被称作《DOTA2》<br>由《DOTA》的地图核心制作者IceFrog（冰蛙）联手美国Valve公司研发的一款游戏，于2013年4月28日开始测试，发布中文名为“刀塔”，是该系列的第二部作品。</p>
            </li>
            <li>
                <div class="boxpic1">
                    <img class="boxpic11" src="./boxpic13.jpg" alt="">
                </div>
                <p class="boxtext">《风暴英雄》<br> 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。</p>
            </li>
            <li>
                <div class="boxpic1">
                    <img class="boxpic11" src="./boxpic14.jpg" alt="">
                </div>
                <p class="boxtext">《300英雄<br>是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法。</p>
            </li>
        </ul>
    </div>
    <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>
</body>
</html>