页面效果如图
<!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>Document</title>
</head>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.header{
height: 34px;
width: 360px;
display: flex;
background-image: url(../bg1px.png);
background-repeat: repeat-x;
background-position: 0 -33px;
border: 1px solid #dbdee1;
align-items: center;
}
.header div{
padding: 0 13px;
height: 34px;
border-top: 3px solid transparent
}
.header .active{
border-top: 3px solid #ff8400 ;
background-color: white;
}
.show{
display: none;
}
.content :first-child{
display: block;
}
</style>
<body>
<!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>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="active" data-index="0">抗疫</div>
<div data-index="1">专栏</div>
<div data-index="2">热点</div>
</div>
<div class="content">
<div class="show" data-index="0">One</div>
<div class="show" data-index="1">Two</div>
<div class="show" data-index="2">Three</div>
</div>
</div>
<script>
let a = document.querySelectorAll('.header div');
let arr = document.querySelectorAll('.show')
function act(){
a.forEach((v,i,t)=>{
t[i].classList.remove('active');
arr[i].style.display="none"
})
this.classList.add('active');
let t = this.dataset.index;
arr[t].style.display="block"
}
a.forEach((v,i,t)=>{
t[i].οnmοuseοver=act
})
</script>
</body>
</html>
</body>
</html>
