前端控制菜单点击和悬浮样式（一）by JavaScript

本章不解读JavaScript HTML5和CSS的基本用法，只对JS控制的逻辑做讲解。如果没有相应基础的，可留言提问。

1.结构层，编写HTML：

此处不粘贴声明，我用的是H5，即：

绑定事件有多种方法，此处用最简单的HTML内嵌。

	

		
Menu One
		Menu Two
		Menu Three
		Menu Four
	

2.表现层， 菜单基本样式代码：

CSS采用LESS预编译工具，以下是LESS源码：

小普及：LESS是减少代码冗余的CSS预处理语言，还有SASS/STYLUS都是不错的CSS预处理语言，前端工程师编完码（就是敲完代码）之后，可用koala工具把less等预处理语言编译为CSS语言（此步不可少，因为很多浏览器识别不了LESS，会报跨域错误，给大家推荐火狐浏览器，Firefox不会报错）

编译后CSS代码：

3.行为层，JS控制。

首先声明一个变量，这个变量用来存储页面加载完毕后获得的LI标签集合（NodeList）。

clickFn方法调用方式有两种，一种是只传event；另一种是传了-1（用e这个参数来接受）和LI标签集合（NodeList），所以要判断e这个参数是否为-1或event，判断是否有第二个参数li，以下是详细讲解。

此处，因为LI标签集合（NodeList）需要再次使用，所以要把它存储起来，当页面加载完成之后，获取到LI标签集合（NodeList），就调用clickFn方法，此时没有evnet事件，用-1作“占位符”，综上，判断是否有第二个参数li，用变量$li判断，没有就存储，有就表示LI标签的点击事件预准备工作完成。

最后，向当前点击LI标签添加active类。

本文章欢迎转载，转载请提供以下链接：

https://blog.csdn.net/yan_lychee/article/details/80045856

本人欢迎前端技术控指点迷津。