<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MOBA游戏分类</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#box{
display: flex;
width: 100%
}
.item{
width: 24.75%;
height: 130px;
text-align: center;
line-height: 130px;
font-size: 20px;
font-family: 'SimSun';
border: 4px solid seashell;
color: whitesmoke;
cursor: pointer;
}
.one{
background-image: url(./图片/英雄联盟.jpg);
background-size: cover;
}
.two{
background-image: url(./图片/dota1.jpg);
background-size: cover;
font-family: 'Courier New', Courier, monospace;
}
.three{
background-image: url(./图片/风暴英雄.jpg);
background-size: cover;
}
.four{
background-image: url(./图片/300英雄.jpg);
background-size: cover;
}
#box .active{
border: 4px solid burlywood;
}
#content{
position: relative;
}
.item1{
width: 100%;
height: 3300px;
background-color: rgb(2, 2, 30);
position: absolute;
display: none;
}
.item2{
width: 100%;
height: 3300px;
background-color: darkred;
position: absolute;
display: none;
}
.item3{
width: 100%;
height: 3300px;
background-color: rgb(2, 2, 92);
position: absolute;
display: none;
}
.item4{
width: 100%;
height: 3300px;
background-color: saddlebrown;
position: absolute;
display: none;
}
#content .active{
display: block;
color: white;
}
.container{
width: 1200px;
margin: 0 auto;
height: 3170px;
background-color: darkgray;
display: flex;
}
.c3{
height: 2800px;
}
.c4{
height: 2660px;
}
.text-1{
width: 70%;
border: 1px solid darkgray;
}
.text-1 div{
margin-left: 20px;
margin-top: 40px;
}
.text-1 h1{
display: inline-block;
}
.text-1 h2{
margin-top: 20px;
}
.text-1 h3{
font-weight: normal;
color: bisque;
}
.text-2{
width: 30%;
border: 1px solid darkgray;
}
.text-2 div{
width:310px ;
height: 210px;
margin: 0 auto;
margin-top: 60px;
background-color: rgb(2, 2, 30);
text-align: center;
}
.text-2 .ol{
height: 220px;
}
.text-2 img{
width: 310px;
}
.text-2 h3{
font-weight: normal;
font-size: 16px;
}
.c2 div{
height: 300px;
}
.c5 div{
height: 185px;
}
.c6 div{
height: 340px;
}
</style>
</head>
<body>
<ul id="box">
<li class="item one active">英雄联盟</li>
<li class="item two">DOTA</li>
<li class="item three">风暴英雄</li>
<li class="item four">300英雄</li>
</ul>
<ul id="content">//这部分文本太长,没写上去,等会视频可以看到
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var oBox=document.querySelector("#box")//获取选项菜单
var oItem=document.querySelectorAll("#box li")//获取菜单内的选项,给后续的点击事件做铺垫
var oContent=document.querySelector('#content')//绑定内容容器
var oItem1=document.querySelectorAll('#content li')//绑定内容
for(var i=0;i<oItem.length;i++){//给每个选项都加上点击按钮
oItem[i].dataset.index=i
oItem[i].onclick=handler
// console.log(oItem[i])
}
function handler(){
var index=this.dataset.index//通过设置自定义属性值(index)来控制点击时的内容切换
for(var n=0;n<oItem.length;n++){//通过for循环来清除每一个选项的active属性。
oItem[n].classList.remove("active")
oItem1[n].classList.remove("active")
}
//然后再通过添加自定义属性来让点击的选项和内容被选中,由于index的的值与被选中的选项所组成的为数组相同,所以,可以进行选项和内容一起切换。
oItem[index].classList.add("active")
oItem1[index].classList.add("active")
}
</script>
</body>
</html>
MOBA游戏分类 - Google Chrome