效果展示：
代码：
先在tab-item中自定义属性name和index
在点击tab栏任意一项时，先清除tab栏中所有的active样式
再用index在点击的tab栏上添加active样式
之后根据刚点击的tab栏的name控制盒子显隐
HTML data-*属性
1、定义和用法
data-*属性用于存储页面或应用程序的私有自定义数据。
data-*属性可以在所有的HTML元素中嵌入数据。
自定义的数据可以让页面拥有更好的交互体验（不需要使用Ajax或去服务端查询数据）。
data-*属性由以下两部分组成：
1.属性名不要包含大写字母，在 data- 后必须至少由一个字符。
2.该属性可以是任何字符串。
注意：自定义属性前缀“data-”会被客户端忽略。
2、HTML 4.01 与 HTML5之间的差异
data-* 属性是 HTML5 新增的。
3、语法
<element data-*="somevalue">4、属性值
| 值 | 描述 |
| somevalue | 指定属性值 (一个字符串) |