JS 题目4-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_88624699/article/details/145660450

题四：Tab选项卡

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

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

margin: 0;

padding: 0;

}

.nav{

width: 100%;

height: 60px;

line-height: 60px;

display: flex;

justify-content: space-between;

}

.nav ul{

list-style: none;

display: flex;

justify-content: center;

margin: 0 auto;

}

.nav ul li{

margin: 0 20px;

font-size: 14px;

}

text-decoration: none;

border-bottom: 2px solid transparent;

color: #333;

}

.active{

color: rgb(190, 238, 15);

}

.text{

width: 500px;

margin: 0 auto;

}

.text .item{

display: none;

}

.text .active1{

display: block;

}

</style>

<body>

<ul>

</ul>

</div>

<div class="item active1">《英雄联盟》是由腾讯控股的首家美国公司RiotGames开发的3D竞技场战网游戏，其主创团队是由实力强劲的Dota-Allstars的核心人物，以及暴雪等著名游戏公司的美术、程序、策划人员组成，将DOTA的玩法从对战平台延伸到网络游戏世界。除了DotA的游戏节奏、即时战略、团队作战外，《英雄联盟》拥有特色的英雄、自动匹配的战网平台，包括天赋树、召唤师系统、符文等元素，让玩家感受全新的英雄对战。</div>

<div class="item">《DOTA》（Defense of theAncients），可以译作守护古树、守护遗迹、远古遗迹守卫，是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。最早的DOTA地图则在混乱之治时代就出现了，一位叫做Eul（Euls）的玩家制作了第一张DOTA地图《RoCDOTA》，其中两队都只有总共5个英雄，非常简单。</div>

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

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

</div>

const ac = document.querySelectorAll('.nav a')

for(let i=0;i<ac.length;i++){

ac[i].addEventListener('mouseenter',function(){

document.querySelector('.nav .active').classList.remove('active')

this.classList.add('active')

document.querySelector('.text .active1').classList.remove('active1')

document.querySelector(`.text .item:nth-child(${i+1})`).classList.add('active1')

})

}

</script>