自定义属性切换Tab栏

效果展示：

 

代码：

 

 先在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	指定属性值 (一个字符串)