电梯导航
思路分析: 1.点击侧边栏按钮
(1)排他思想修改自身样式
(2)页面滚动到右侧对应下标的盒子位置
* a.盒子位置 ： offsetTop
* b.页面滚动 : document.documentElement.scrollTop
js代码
//1.获取元素
let asideList = document.querySelectorAll('.aside>div') //侧边栏列表
let contentList = document.querySelectorAll('.content>div') //右侧内容列表
//2.注册事件
for (let i = 0; i < asideList.length; i++) {
asideList[i].onclick = function () {
//3.事件处理
//3.1 排他思想修改自身样式（升级版：classList）
//(1)先找出唯一选中的那个类
document.querySelector('.item.active').classList.remove('active')
//(2)给当前点击的添加类
this.classList.add('active')
//3.2 页面滚动到右侧对应下标的盒子位置 (三大家族没有单位的，直接写数字)
document.documentElement.scrollTop = contentList[i].offsetTop
}
}
window.onscroll = function () {
for (let i = 0; i < asideList.length; i++) {
if (document.documentElement.scrollTop >= contentList[i].offsetTop) {
}
}
}
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 3000px;
}
.aside {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.item {
height: 40px;
line-height: 40px;
text-align: center;
padding: 0 10px;
cursor: pointer;
}
.active {
background-color: red;
color: #fff;
}
.content {
width: 660px;
margin: 400px auto;
}
.neirong {
height: 300px;
margin-bottom: 20px;
color: #fff;
}
.content1 {
background-color: red;
}
.content2 {
background-color: blue;
}
.content3 {
background-color: orange;
}
.content4 {
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="aside">
<div class="item active">男装/女装</div>
<div class="item">儿童服装/游乐园</div>
<div class="item">电子产品</div>
<div class="item">电影/美食</div>
</div>
<div class="content">
<div class="neirong content1">男装/女装</div>
<div class="neirong content2">儿童服装/游乐园</div>
<div class="neirong content3">电子产品</div>
<div class="neirong content4">电影/美食</div>
</div>
<script>
/* 思路分析
1.点击侧边栏按钮
(1)排他思想修改自身样式
(2)页面滚动到右侧对应下标的盒子位置
* a.盒子位置 ： offsetTop
* b.页面滚动 : document.documentElement.scrollTop
*/
//1.获取元素
let asideList = document.querySelectorAll('.aside>div') //侧边栏列表
let contentList = document.querySelectorAll('.content>div') //右侧内容列表
//2.注册事件
for (let i = 0; i < asideList.length; i++) {
asideList[i].onclick = function () {
//3.事件处理
//3.1 排他思想修改自身样式（升级版：classList）
//(1)先找出唯一选中的那个类
document.querySelector('.item.active').classList.remove('active')
//(2)给当前点击的添加类
this.classList.add('active')
//3.2 页面滚动到右侧对应下标的盒子位置 (三大家族没有单位的，直接写数字)
document.documentElement.scrollTop = contentList[i].offsetTop
}
}
/* 今日课后作业： 监听网页滚动，当网页滚动到中间对应的盒子的时候，左边列表也要跟着高亮 */
window.onscroll = function () {
for (let i = 0; i < asideList.length; i++) {
if (document.documentElement.scrollTop >= contentList[i].offsetTop) {
}
}
}
</script>
</body>
</html>
