目录
css代码
html代码
js代码
完整代码
效果图
需求：点击某个模块，显示对应内容
css代码
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
ul{
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: 20%;
}
ul>li{
text-align: center;
width: 200px;
height: 80px;
/* border: 1px solid red; */
padding-top: 30px;
cursor: pointer;
}
ul .active{
border-bottom: 2px solid black;
}
.wrapper{
position: relative;
}
.list{
width: 1000px;
margin: 0 auto;
margin-top: 120px;
}
.list div{
width: 800px;
height: 700px;
margin-top: 30px;
}
.list div:nth-child(1){
background-color: antiquewhite;
}
.list div:nth-child(2){
background-color: deepskyblue;
}
.list div:nth-child(3){
background-color: lightgreen;
}
.list div:nth-child(4){
background-color: hotpink;
}
</style>html代码
<div class="wrapper">
<ul>
<li class="active">HUAWEl MatePad <br>
Pro系列</li>
<li>HUAWEl MatePad <br>
系列</li>
<li>HUAWEl MatePad <br>
Paper系列</li>
<li>HUAWEl MateP; <br>
SE系列</li>
</ul>
<div class="list">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>js代码
<script>
const lis=document.querySelectorAll('li')
const divs=document.querySelectorAll('.list div')
for(let i=0;i<lis.length;i++){
lis[i].addEventListener('click',function() {
//先移除所有的active类，谁点击，给谁添加active类
document.querySelector('ul .active').classList.remove('active')
lis[i].classList.add('active')
document.documentElement.scrollTop=divs[i].offsetTop//页面被卷去的尺寸等于每个div到顶部的距离
})
}
</script>完整代码
<!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>
*{
padding: 0;
margin: 0;
list-style: none;
}
ul{
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: 20%;
}
ul>li{
text-align: center;
width: 200px;
height: 80px;
/* border: 1px solid red; */
padding-top: 30px;
cursor: pointer;
}
ul .active{
border-bottom: 2px solid black;
}
.wrapper{
position: relative;
}
.list{
width: 1000px;
margin: 0 auto;
margin-top: 120px;
}
.list div{
width: 800px;
height: 700px;
margin-top: 30px;
}
.list div:nth-child(1){
background-color: antiquewhite;
}
.list div:nth-child(2){
background-color: deepskyblue;
}
.list div:nth-child(3){
background-color: lightgreen;
}
.list div:nth-child(4){
background-color: hotpink;
}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li class="active">HUAWEl MatePad <br>
Pro系列</li>
<li>HUAWEl MatePad <br>
系列</li>
<li>HUAWEl MatePad <br>
Paper系列</li>
<li>HUAWEl MateP; <br>
SE系列</li>
</ul>
<div class="list">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script>
const lis=document.querySelectorAll('li')
const divs=document.querySelectorAll('.list div')
for(let i=0;i<lis.length;i++){
lis[i].addEventListener('click',function() {
//先移除所有的active类，谁点击，给谁添加active类
document.querySelector('ul .active').classList.remove('active')
lis[i].classList.add('active')
document.documentElement.scrollTop=divs[i].offsetTop//页面被卷去的尺寸等于每个div到顶部的距离
})
}
</script>
</body>
</html>效果图
