Web API---tab栏切换(重点案例)

 

 

 

当鼠标点击上面相应得选项卡(tab)，下面内容跟随变化

 

 先把所有item隐藏，再把第一个item显示出来

 

 

1.Tab栏切换有2个大模块

2.上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想）修改类名的方式

 

 第二步，让剩下的内容显示出来

 

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

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

 

 

H5自定义属性

 自定义属性的目的：为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

H5规定自定义属性data-开头作为属性名并且赋值

IE 11才开始支持