<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>实现选项卡</title>
<style>
#div1 div {
width: 200px;
height:200px;
border:1px solid #aaa;
background: #ccc;
display: none;
}
.active {
background: yellow;
}
</style>
<script type="text/javascript">
window.onload=function() //等待页面加载完成之后再执行JS代码
{
var oDiv=document.getElementById("div1");
var aBtn=oDiv.getElementsByTagName("input"); //获取操作按钮的权限
var aDiv=oDiv.getElementsByTagName("div"); //获取操作选项卡的权限
for(var i=0;i<aBtn.length;i++){ //给每一个按钮绑定点击事件
aBtn[i].index=i;
aBtn[i].onclick=function(){ //定义点击事件的具体操作
for(var i=0;i<aBtn.length;i++){ //先将按钮和选项卡初始化
aBtn[i].className="";
aDiv[i].style.display='none';
}
this.className='active'; //点击之后，对应的按钮增加高亮的属性
aDiv[this.index].style.display='block'; //点击之后，对应的选卡显示
}
}
};
</script>
</head>
<body>
<div id="div1">
<input type="button" id="btn1" value="教育">
<input type="button" id="btn2" value="医疗">
<input type="button" id="btn3" value="法律">
<input type="button" id="btn4" value="保险">
<div>111111</div>
<div>222222</div>
<div>333333</div>
<div>444444</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
这个小练习主要学到的知识点有：
- 在标准的浏览器下，在HTML中给一个标签添加一个自定义的属性，通常都会出错；但是相应的在JS中给一个对象自定义一个属性则不会出错，比如：
这样子给aBtn增加一个自定义的index属性是不会出错的，但是这样给input增加一个属性在很多浏览器下都是会出错的：
