简单选项卡的制作，选项卡是页面中比较常见的部分，其核心原理是通过添加f自定义属性，获取到需要的索引，将类名添加给要显示的对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 450px;
height: 300px;
border: 1px solid gray;
}
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
#menu li {
float: left;
width: 150px;
line-height: 35px;
text-align: center;
background: #999;
}
#menu li.on {
background: #fff;
}
#cnt div {
display: none;
line-height: 300px;
text-align: center;
}
#cnt div.current {
display: block;
}
</style>
</head>
<body>
<div id="box">
<ul id="menu">
<li class="on">电影</li>
<li>音乐</li>
<li>游戏</li>
</ul>
<div id="cnt">
<div class="current">最热电影</div>
<div>热门歌曲尽在掌握</div>
<div>全新大作，免费畅玩</div>
</div>
</div>
<script>
var mel = document.getElementById('menu').getElementsByTagName('li'),
con = document.getElementById('cnt').getElementsByTagName('div');
for (i = 0; i < mel.length; i++) {
mel[i].index = i
mel[i].onclick = function () {
clear();
this.className = "on";
clear2();
con[this.index].className = "current"
}
}
function clear() {
for (i = 0; i < mel.length; i++) {
mel[i].className = ""
}
}
function clear2() {
for (i = 0; i < mel.length; i++) {
con[i].className = ""
}
}
</script>
</body>
</html>
this关键字,this在函数内部，this的指向不固定（this指向调用者），在事件函数中，谁触发就指向谁，在函数外部指向window对象。自定义属性，是指给标签添加已有属性以外的的属性。
