87,989
社区成员
发帖
与我相关
我的任务
分享<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>sdfdsfsdfsdf</title>
<style type="text/css">
*{margin:0;padding:0;}
li{background:#0066cc;width:100px;color:#fff;width:100px;float:left;}
.box{display:none;border:1px solid #ccc;width:200px;height:100px;}
.active{background:#505050;}
</style>
<script type="text/javascript">
window.onload=function(){
var otab=document.getElementById('tab');
var oli=otab.getElementsByTagName('li')
var obox=otab.getElementsByTagName('box');
for(i=0;i<oli.length;i++){
oli[i].index=i;
oli[i].onclick=function()
{
for(i=0;i<oli.length;i++)
{
oli[i].className='';
obox[i].style.display='none';
}
this.className='active';
obox[this.index].style.display='block';
};
}
}
</script>
</head>
<body>
<div id="tab">
<ul>
<li class="active">第一个</li>
<li>第二个</li>
</ul>
<div class="box" style="display:block;">1</div>
<div class="box">2</div>
</div>
</body>
</html>
<script type="text/javascript">
window.onload=function(){
var otab=document.getElementById('tab');
var oli=otab.getElementsByTagName('li')
var obox = document.getElementById('tab').getElementsByTagName('div'); //这里
for(i=0;i<oli.length;i++){
oli[i].index=i;
oli[i].onclick=function()
{
for(i=0;i<oli.length;i++)
{
oli[i].className='';
//obox[i].style.display='none';
for(var j = 0; j < obox.length; j ++) {
if (obox[j].className == 'box') obox[j].style.display = 'none';
}
}
this.className='active';
//查找并显示显示对应的<div class="box">
var counter = 0;
for(var j = 0; j < obox.length; j ++) {
if (obox[j].className == 'box') {
if (counter == this.index) {
obox[j].style.display = 'block';
break;
}
else counter ++;
}
}
};
}
}
</script>
var obox=otab.getElementsByTagName('div'); //你的这行出现问题了,byTagName 是对象类型,并不是类名。
window.onload=function(){
var otab=document.getElementById('tab');
var oli=otab.getElementsByTagName('li')
var obox=otab.getElementsByTagName('div');
for(i=0;i<oli.length;i++){
oli[i].index=i;
oli[i].onclick=function()
{
for(i=0;i<oli.length;i++)
{
oli[i].className='';
obox[i].style.display='none';
}
this.className='active';
obox[this.index].style.display='block';
};
}
}