js开发实例 —— tab栏切换案例（自定义属性）&下拉菜单

九、tab栏切换案例（自定义属性）

思路：

① Tab栏切换有2个大的模块。

② 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想)修改类名的方式。

③ 下面的模块内容,会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。

④ 规律:下面的模块显示内容和上面的选项卡一一对应 ，相匹配。

⑤ 核心思路:给上面的tab_ list 里面的所有小li添加自定义属性，属性值从0开始编号。

⑥ 当我们点击tab_ list 里面的某个小li，让tab__con 里面对应序号的内容显示，其余隐藏(排他思想)。

HTML 代码：

略

（布局思路）

JS 代码：

十、下拉菜单

思路：

① 导航栏里面的Ii都要有鼠标经过效果,所以需要循环注册鼠标事件

② 核心原理:当鼠标经过li里面的第二个孩子ul显示，当鼠标离开,则ul隐藏

JS 代码：