一文说清家用电视服务与机顶盒固件官网的对应关系
2025/12/24 6:39:25
1.选项卡由英雄联盟、DOTA、风暴英雄、300英雄四块组成； 2.未选择时，默认选中第一个标签页；3.选择某一选项后，下方跳出对应游戏的相关介绍内容。
解：1.获取元素
2.遍历<a>标签
3.绑定鼠标移入事件
（1）取消导航栏当前激活的active；（2）给鼠标移入的a 添加active
（3）内容区同上（1）（2）【添加第 i+1 个.item】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.tab {
width: 500px;
height: 300px;
margin: 20x;
border: 1px solid black;
}
.tab-nav {
width: 100%;
height: 60px;
line-height: 60px;
display: flex;
justify-content: space-between;
}
.tab-nav ul {
list-style: none;
display: flex;
margin-left: flex-end;
}
.tab-nav ul li {
margin: 0 20px;
font-size: 14px;
}
.tab-nav ul li a {
text-decoration: none;
border-bottom: 2px solid transparent;
color: #333;
}
.tab-nav ul li a.active {
border-color: #e1251b;
color: #e1251b;
}
.tab-content {
padding: 0 16px;
}
.tab-content .item {
display: none;
}
.tab-content .item.active {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-nav">
<ul>
<li><a class="active" href="javascript:;">英雄联盟</a></li>
<li><a href="javascript:;">DOTA</a></li>
<li><a href="javascript:;">风暴英雄</a></li>
<li><a href="javascript:;">300英雄</a></li>
</ul>
</div>
<div class="tab-content">
<div class="item active">这是一个英雄联盟游戏</div>
<div class="item">这是一个DOTA游戏</div>
<div class="item">这是一个风暴英雄游戏</div>
<div class="item">这是一个300英雄游戏</div>
</div>
</div>
<script>
// 获取元素
const as = document.querySelectorAll('.tab-nav a')
// 遍历所有<a>标签
for (let i =0; i < as.length; i++) {
// 绑定鼠标移入事件
as[i].addEventListener('mouseenter', function () {
// 取消导航栏当前激活的active(移除'active'类)
document.querySelector('.tab-nav .active').classList.remove('active')
// 给鼠标移入的a添加active
this.classList.add('active')
// 取消内容区当前激活的active(移除'active'类)
document.querySelector('.tab-content .active').classList.remove('active')
// 给内容区中第 i+1 个.item, 添加active (显示当前标签)
document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
})
}
</script>
</body>
</html>
第一遍复写
1.给内容区添加active,漏了一个括号【.item:nth-child(${i + 1})】（85行）
document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')