js选项卡的原理
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>js选项卡</title>
<style>
#div1 div{ background-color:#9F0; display:none; border:#009 1px solid;height:80px;width:200px;} //样式内容
.active{background:yellow;} //按钮的背景颜色
</style>
<script type="text/javascript">
window.onload=function(){ var a1=document.getElementById("div1"); var a2=a1.getElementsByTagName("input"); var a3=a1.getElementsByTagName("div"); for(var i=0;i<a2.length;i++){ a2[i].index=i;//给input元素命序列 a2[i].onclick=function() { for(var i=0;i<a2.length;i++) { a2[i].className="";//令class属性为空 a3[i].style.display="none";//清除display为block的属性； } this.className="active";//当前属性为加了按钮的； a3[this.index].style.display="block";//令当前的属性为block } } }
</script>
</head>
<body>
<div id="div1"> <input class="active" type="button" value="AA" ///在最外层套div方便选择方便选择
<input type="button" value="BB" />
<input type="button" value="CC" />
<input type="button" value="DD" />
<div style="display:block">000</div> //行内样式最高级别显示默认
<div>111</div>选项卡内容
<div>222</div>
<div>333</div>
</div>
</body>
</html>
第一个js文件现在学习了
