选项卡制作过程中的问题：1、把所有的input和div应丢在一个大的div中2、给按钮设置一个选中的颜色是通过class来设置的，通过行间样式让默认的div显示3、每次点击产生变化时要通过for循环将之前的演示给清空，设置className为空，display为none4、this的使用.我写的是oBtn[i],这个时候应该涉及到i的作用域的问题，所以一直报错。this就是指当前事件的按钮。5、下面对应的div是用js给按钮设置一个index的值
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1 div{
height: 200px;
width: 100px;
background: grey;
border: 1px solid red;
display: none;
}
.active{
background: yellow;
}
</style>
<script type="text/javascript">
window.onload = function (){
var oDiv = document.getElementById(‘div1‘);
var oBtn = oDiv.getElementsByTagName(‘input‘);
var oDiv2 = oDiv.getElementsByTagName(‘div‘);
for(var i=0;i<oBtn.length;i++){
oBtn[i].index = i;
oBtn[i].onclick = function () {
for(var i=0;i<oBtn.length;i++){
oBtn[i].className = ‘‘;
oDiv2[i].style.display = ‘none‘;
}
this.className = ‘active‘;
oDiv2[this.index].style.display = ‘block‘;
};
}
};
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="zhaosheng"/>
<input type="button" value="jiaoyu"/>
<input type="button" value="chuguo"/>
<input type="button" value="peixun"/>
<div style="display: block">zhaosheng</div>
<div>jioayu</div>
<div>chuguo</div>
<div>peixun</div>
</div>
</body>
</html>
时间： 2024-11-25 06:45:17