JS APl关于电梯导航做法（ES6）

文章目录

文章目录

需求：

整体架构流程

技术名词解释

代码展示:

小结

---

需求：

1.点击哪个模块可以跳转的对应的模块

2.点击哪个模块对应的模块显示高亮（就是哪个盒子背景色变红色）

整体架构流程

// 1. 获元取素

document.querySelectorAll

// 2.内容的盒子获取

//3.. 左侧aside 模块 点击谁，谁高亮

这里用到冒泡就是获取父盒子就可以

//4.// 找到上一个active 移除类

例如：
在语言模型中，编码器和解码器都是由一个个的 Transformer 组件拼接在一起形成的。

技术名词解释

例如：

• querySelectorAll（获取元素 但是返回是一组伪数组）
• querySelector（获取元素）
• this.classList.add（追加类）
• document.documentElement.scrollTop（整个盒子被卷去的举例）

代码展示:

HTML： 

  

        
男装/女装
        
儿童服装/游乐园
        
电子产品
        
电影/美食
    

    

        
男装/女装
        
儿童服装/游乐园
        
电子产品
        
电影/美食
    

css：

 

 

 

小结：

我们需要实现点击某一个按钮,然后滚动到对应的区域。 滚动的时候,右侧对应的分类实现高亮 其实,这个功能就2个步骤: 1.点击元素高亮,滚动到对应区域