js题目4-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_86997425/article/details/145341869
<!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>
    .whole{
      width: 500px;
      height: 400px;
      margin: 0 auto;
    }
    .top{
      display: flex;
      justify-content: center;
    }
    .nav{
      margin: 20px;
    }
    a{
      text-decoration: none;
      color: black;
    }
    .active1{
      color: red;
    }
    .content{
      display: none;
    }
    .active2{
      display: block;
    }
  </style>
</head>
<body>
  <div class="whole">
    <div class="top">
      <div class="nav"><a href="#" class="active1">英雄联盟</a></div>
      <div class="nav"><a href="#">DOTA</a></div>
      <div class="nav"><a href="#">风暴英雄</a></div>
      <div class="nav"><a href="#">300英雄</a></div>
    </div>
    <div class="tab">
      <div class="content active2">
        《英雄联盟》（League of Legends，简称LOL）是由美国 拳头游戏 （Riot Games）开发、中国内地由 腾讯游戏 代理运营的英雄对战MOBA竞技网游。
         游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系统。
      </div>
      <div class="content">
        DOTA2的世界由天辉和夜魇两个阵营所辖区域组成，有上、中、下三条主要的作战道路相连接，中间以河流为界。 
        在这个充满神秘和挑战的世界中，通常每个阵营分别由五位玩家所扮演的英雄担任守护者，他们将以守护己方远古遗迹并摧毁敌方远古遗迹为使命，通过提升等级、赚取金钱、购买装备和击杀敌方英雄等诸多竞技手段。 
        与对手斗智斗勇，为了最终的胜利而战！ DOTA2是一个充满技巧、策略和变化的电子竞技游戏。
      </div>
      <div class="content">
        《风暴英雄》 是由 暴雪娱乐公司 开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。 
        游戏中的英雄角色主要来自于暴雪四大经典游戏系列：《魔兽世界》《暗黑破坏神》《星际争霸》和《守望先锋》。
        它是一款道具收费的游戏，与《星际争霸Ⅱ》基于同一引擎开发。
        2024年4月10日，网易游戏发文称与暴雪娱乐再次携手，《风暴英雄》将重回国服。
        </div>
      <div class="content">
        《300英雄》是由 上海 跳跃网络 研发、 中青宝 负责运营的全3D英雄对战网游 。 
        于2013年12月6日上线PC平台。 
        《300英雄》以 7v7 组队对抗玩法为基础，提供 永恒战场 和 永恒竞技场 两种经典模式，并创新性地加入勇者斗恶龙、保护雅典娜等多种休闲娱乐玩法，游戏里有二次元世界中的各种超人气 动漫角色 。
      </div>
    </div>
  </div>
  <script>
    const as=document.querySelectorAll('.top a')
    for(let i=0;i<as.length;i++){
      as[i].addEventListener('mouseenter',function(){
        document.querySelector('.top .active1').classList.remove('active1')
        this.classList.add('active1')
        document.querySelector('.tab .active2').classList.remove('active2')
        document.querySelector(`.tab .content:nth-child(${i + 1})`).classList.add('active2')
      })
    }
  </script>
</body>
</html>
屏幕录制 2025-01-24 152110