<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡1</title>
<style>
#div1 div {
width: 200px;
height: 200px;
background-color: #ccc;
border: 1px solid pink;
display: none; //默认不显示DIV
}
#div1 .active {
background-color: greenyellow;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById(‘div1‘);
var aBtn = oDiv.getElementsByTagName(‘input‘);
var aDiv = oDiv.getElementsByTagName(‘div‘);
for(i=0;i<aBtn.length;i++){
aBtn[i].index = i; //给按钮自定义一个index属性,用于改变DIV
aBtn[i].onclick = function () {
for(i=0;i<aBtn.length;i++){
aBtn[i].className = ‘‘; //点击当前按钮时,取消对上一个按钮的设置
aDiv[i].style.display = ‘none‘; //点击当前按钮时,取消对上一个按钮对应的DIV的设置
}
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;">1234</div>
<div>2345</div>
<div>3456</div>
<div>4567</div>
</div>
</body>
</html>
时间： 2024-10-22 19:09:44