本文介绍了H5中使用data-*属性规范来实现tab栏切换的案例。通过data-开头的自定义属性结合Node.dataset对象，可以方便地获取和修改属性值。在实现tab栏功能时，通过导航标签的自定义属性与内容标签对应，避免了顺序依赖，提高了灵活性。
自定义属性规范
H5规范：data-* 属性以data-开头,其格式如下data-*=”xxx”
<div id="demo" data-myname="userName" data-age="10">Node.dataset是以对象形式存在的，当我们为同一个DOM节点指定了多个自定义属性时，
Node.dataset则存储了所有的自定义属性的值。
var demo = document.querySelector(选择器);
获取属性:
当我们如下格式设置时，则需要以驼峰格式才能正确获取
- jquery的方式获取
- $(‘#id’).data(‘属性名称)
- H5的方式获取
- dataset.属性名称（省略data-）
- dataset.[属性名称]（省略data-）
var name = demo.dataset['userName'];
var age = demo.dataset.userName;
<div id="demo" data-my-name="userName" data-age="10">
data-* 属性以data-开头 遵循小驼峰命名 data-user-name被获取时使用userName (浏览器解析大小转为小写)
正确获取方法:
var name = demo.dataset[‘userName’];
var age = demo.dataset.userName;
修改属性:
- jquery的方式修改
- $(‘#id’).data(属性名称 , 属性值);
- H5的方式修改
- dataset.属性名称 = ‘属性值’
demo.dataset['userName'] = 'developer';此案例使用自定义属性的优点分析:
在导航标签里分别添加一个自定义属性, 格式为data-id="id名" 这里的id名对应内容标签里的id属性对应的值, 这样的话导航标签就跟内容标签对应起来了, 不需考虑标签的先后顺序.
TAB栏案例
<!DOCTYPE html>
<html 
最低0.47元/天 解锁文章
9659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
