23

一、loading
1.做出loading时候的二个圈圈的涟漪效果

然后在进一步提升逼格，不用这个劳什子的div,用伪元素

2把loading加入到页面中，肯定要用到active啦，因为是最先出来的，所以加在html的style的里面，然后remove active放在最后面，同时为了看见效果，给他延迟一段时间在remove

233.PNG

二、鼠标向下滚动就会变化的第一栏

2311.PNG

这里的stick状态，某个东西的状态激活和不激活不一样，比如颜色，这个时候如果激活不在它最近的那个标签发生，那么最好让他是继承的，不然就近给定下来了，激活某个状态也敌不过它本身自带的状态

2312.PNG

三、让鼠标移到导航栏相应的字上面就出现下面的submenu
1、先通过a标签找到它的兄弟标签ul（放菜单的那个），因为之间可能有回车什么的，所以要加一个while循环来确定我们找到是ul，然后这里有很多以menuTigger为class的a标签，所以再要加个外循环。然后鼠标在a标签上面就加个active，离开就remove active

234.PNG

已经确定兄弟是ul，注意这里是大写

235.PNG

2、然后我们发现无法把鼠标移到submenu上面，因为ul和a是兄弟啊，离开a就没得active了

236.PNG

所以我们改成监听ul的爹爹li了，注意这里menuTigger的class也要改放在相应的li上面了哦

237.PNG

3、然后这个时候红线是因为鼠标hover控制的，鼠标好不容易可以去到submeue，然后红线又没有啦，所以我们不应该用hover来，所以干脆我们就不找ul了，直接把active放在li上面，这样红线和submene都由active激活状态（其实一开始放在li上面不也是很方便吗。。）

238.PNG

4、然后发现我们激活active的li只有menuTigger的class的，然后其他的li连红线也没有了，所以这个时候我们把这个导航栏里面所有的li都激活active，这时候没有ul的也就不会有submenu，这个就不用担心了，但是红线大家都有

2310.PNG

四、页面内部的跳转

239.PNG

let aTags=document.querySelectorAll('nav.menu>ul>li>a')
for(let i=0;i aTags[i].onclick=function(x){
x.preventDefault()//阻止默认动作，这里是跳转，但是跳转的位置不是我们想要的
let a=x.currentTarget
//console.log(a.href)//我是被浏览器处理过的，带着http协议的
let href=a.getAttribute('href')//用户写什么就是什么
let element=document.querySelector(href)
let top=element.offsetTop//得到的元素距离顶部的位置，是个固定值，而用getBoundingClientRect得到的是距离窗口的距离，所以会变化
window.scrollTo(0,top-80)//让当前窗口定位到这个位置
}
}