<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload=function(){
var oDiv=document.getElementById(‘div1‘);
var bDiv=oDiv.getElementsByTagName(‘input‘);
var cDiv=oDiv.getElementsByTagName(‘div‘);
for(var i=0;i<bDiv.length;i++){
bDiv[i].index=i;
bDiv[i].onclick=function(){
for(var i=0;i<bDiv.length;i++)
{
bDiv[i].className=‘‘;
cDiv[i].style.display=‘none‘;
}
this.className=‘active‘;
cDiv[this.index].style.display=‘block‘;
};
}
}
</script>
<style>
#div1 .input{ float: left;}
#div1>div{ border: solid 1px #008000 ; width: 100px; height: 150px; display: none;}
.active{background-color: yellow;}
</style>
</head>
<body>
<div id="div1">
<input type="button" value="数学" class="active"/>
<input type="button" value="语文" />
<input type="button" value="英语" />
<input type="button" value="科学" />
<div style="display: block;">我是数学</div>
<div>我是语文</div>
<div>我是英语</div>
<div>我是科学</div>
</div>
</body>
</html>
这是比较常见的选项卡的一个例子
这个作业浪费时间很长
做这个作业之前一定要先理解各个函数之间的逻辑关系
bDiv[i].index=i;是个重点
要知其所以然
这个作业不是做得特别好
是多次的修改才做成的
所以这个页面还是要多做几遍的
时间： 2024-12-07 00:28:16