您的位置：首页 > Web前端 > JavaScript

[学习笔记]JavaScript基础--选项卡

2015-08-05 23:14 891 查看

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
#div1 .active {
background: yellow;
}
/*当前的按钮为黄色*/
#div1 div {
width: 200px;
height: 200px;
background: #CCC;
border: 1px solid #999;
display: none;
}
</style>
<script>
window.onload = function () {
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++) {
/*所有的按钮没有class的状态*/
aBtn[i].className = '';
/*所有的选项卡都隐藏*/
aDiv[i].style.display = 'none';
}
/*this:当前发生事件的元素*/
this.className = 'active';
/*让当前的选项卡显示*/
aDiv[this.index].style.display = 'block';
};

}
};
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="教育" />
<input type="button" value="培训" />
<input type="button" value="招生" />
<input type="button" value="出国" />
<div style="display:block">11111</div>
<div>22222</div>
<div>33333</div>
<div>44444</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航