Tag选项卡

tag选项卡：点击上方对应的按钮会显示对应的游戏介绍

原理：先确定一个默认标签，再通过js中的classList.remove添加属性/classList.add移除属性特定给当前被点击的元素设置特殊样式

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .menu{
            width: 300px;
        }
        .menu ul{
            display: flex;
            justify-content: space-between;
            margin-left: 25px;
        }
        .menu ul li button{
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: paleturquoise;
            border: none;
        }
        .intro{
            position: relative;
            width: 300px;
            height: 300px;
        }
        .intro ul li{
            display: none;
            position: absolute;
            left: 10px;
            top: 10px;
            padding: 10px;
            width: 300px;
            height: 300px;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            line-height: 25px;
            background-color: paleturquoise;
        }
        .menu ul .active{
            height: 70px;
            background-color: pink;
        }
        .intro ul .active{
            background-color: pink;
            display: block;
        }
    </style>

    <div class="box">
        <div class="menu">
            <ul>
                <li class="active"><button>英雄联盟</button></li>
                <li><button>DOTA</button></li>
                <li><button>风暴英雄</button></li>
                <li><button>300英雄</button></li>
            </ul>
        </div>
        <div class="intro">
            <ul>
                <li class="active">
                    《英雄联盟》（League of Legends，简称LOL）是由美国拳头游戏（Riot Games）开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系《英雄联盟》致力于推动全球电子竞技的发展，除了联动各赛区发展职业联赛、打造电竞体系之外，每年还会举办“英雄联盟季中冠军赛”、“英雄联盟全球总决赛”、“英雄联盟全明星赛”三大世界级赛事，形成了自己独有的电子竞技文化
                </li>
                <li>
                    Dato是魔兽的对战版本之一，支持人数为1-10，地图是即时战略游戏《魔兽争霸3》玩家自编的一款非常流行的对抗类RPG地图。
                </li>
                <li>
                    游戏中的英雄角色主要来自于暴雪四大经典游戏系列：《魔兽世界》、《暗黑破坏神》、《星际争霸》和《守望先锋》。它是一款道具收费的游戏，与《星际争霸Ⅱ》基于同一引擎开发。
                </li>
                <li>
                    《300英雄》是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法
                </li>
            </ul>
        </div>
    </div>

<script>
        // 获取这两组li标签
        var menulist=document.querySelectorAll(".menu li")
        var introlist=document.querySelectorAll(".intro li")
        // 给每个标签添加自定义属性和单击响应函数
        for(var i=0;i<menulist.length;i++){
            menulist[i].dataset.index=i
            menulist[i].onclick=handler//每个标签都绑定单击响应函数
        }
        function handler(){
            var index=this.dataset.index
            for(var m=0;m<menulist.length;m++){
                //移除所有active
                menulist[m].classList.remove("active")
                introlist[m].classList.remove("active")
            }
            //单独给单击的标签添加active
            menulist[index].classList.add("active")
            introlist[index].classList.add("active")
        }
</script>