html5中的自定义属性，以data-开头，可以通过html5提供的api获取
示例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>h5 自定义属性 data</title>
</head>
<body>
<div type="text" id="user" data-name="ZhangSan" data-age="28" data-sex="male" data-user-name="ZhangSan001">
</div>
<script type="text/javascript">
//设置自定义属性的方式 data-xxx
//获取自定义属性的集合对象 DOMStringMap对象
var user = document.querySelector('#user').dataset;
//使用 集合对象.xxx 或 集合对象["xxx"]
console.log(user.name + " " + user["age"] + " " + user.sex + " " + user.userName);
//向集合中添加属性
user.id = "u001";//data-id = "u001"
user.score = "90";//data-score = "90"
</script>
</body>
</html>示例2：根据自定义属性，实现tab页内容的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义属性例子-Tab页导航</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.tabs{
width: 400px;
background-color: #FFF;
border: 1px solid #93B9E1;
margin:50px auto;
box-sizing: border-box;
}
.tabs nav{
line-height: 30px;
text-align: center;
background-color: #93B9E1;
display: flex;
}
nav a{
display: block;
width:100px;
border-right: 1px solid #FFF;
color: #000;
text-decoration: none;
}
nav a.active {
background-color: #269DC1;
}
nav a:last-child {
border-right: 0 none;
}
.const{
display: none;
}
li:first-child{
background-color: yellow;
}
ol li{
line-height: 30px
}
</style>
</head>
<body>
<div class="tabs">
<nav>
<a href="javascript:void(0);" class="active" data-const="myTab1">myTab1</a>
<a href="javascript:void(0);" data-const="myTab2">myTab2</a>
<a href="javascript:void(0);" data-const="myTab3">myTab3</a>
<a href="javascript:void(0);" data-const="myTab4">myTab4</a>
</nav>
<section class="const" id="myTab1" style="display: block;">
<ol>
<li>haha1</li>
<li>haha2</li>
<li>haha3</li>
<li>haha4</li>
<li>haha5</li>
<li>haha6</li>
</ol>
</section>
<section class="const" id="myTab2">
<ol>
<li>xixi1</li>
<li>xixi2</li>
<li>xixi3</li>
<li>xixi4</li>
<li>xixi5</li>
<li>xixi6</li>
</ol>
</section>
<section class="const" id="myTab3">
<ol>
<li>hehe1</li>
<li>hehe2</li>
<li>hehe3</li>
<li>hehe4</li>
<li>hehe5</li>
<li>hehe6</li>
</ol>
</section>
<section class="const" id="myTab4">
<ol>
<li>lala1</li>
<li>lala2</li>
<li>lala3</li>
<li>lala4</li>
<li>lala5</li>
<li>lala6</li>
</ol>
</section>
</div>
<script type="text/javascript">
/*var alinks = document.querySelectorAll('nav a');
for(let index in alinks){
alinks[index].onclick = function(){
var active = document.querySelector('.active');
active.classList.remove("active")
document.querySelector('#'+active.dataset.const).style.display = "none";
this.classList.add("active");
document.querySelector('#'+this.dataset.const).style.display = "block";
}
}*/
//事件委托方式，利用事件冒泡，可以减少DOM操作，提高页面性能
var navs = document.querySelector("nav");
navs.onclick = function(e){
var active = document.querySelector('.active');
active.classList.remove("active")
document.querySelector('#'+active.dataset.const).style.display = "none";
var target = e.target || e.srcElement
target.classList.add("active");
document.querySelector('#'+target.dataset.const).style.display = "block";
}
</script>
</body>
</html>