用纯js代码写一个简易的电梯导航功能,以下是我写的js代码(页面布局代码在文章最后,先展示js代码):
1、先获取ul的对象,利用事件委托,为给ul绑定click事件
const ulObj = document.querySelector('.floor')
ulObj.addEventListener('click', function(e){
}
})
2、在绑定事件的回调函数做以下处理
1)判断数据是否点击的是li元素,并且自定义属性name的值不为空
2)获取点击li元素的name属性,找到对应的大盒子,获取大盒子到网页顶端的高度
3)把大盒子到网页顶端的高度赋值给html的scrollTop,这一个实现对应的大盒子到页面顶端
4)移除原li的高亮属性,给对应的li标签添加高亮属性
const ulObj = document.querySelector('.floor')
ulObj.addEventListener('click', function(e){
const name = e.target.dataset.name
if(e.target.tagName == 'LI' && e.target.dataset.name){
document.documentElement.scrollTop = document.querySelector(`.box-${name}`).offsetTop
if(document.querySelector('.active')) document.querySelector('.active').classList.remove('active')
e.target.classList.add('active')