<!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>
点击无任何反应，求达人为我解释下。
<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>
点击无任何反应，求达人为我解释下。
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';
};}}
var obox=otab.getElementsByTagName('box');
没有html标签的名称为box的
var obox=otab.getElementsByTagName('div'); //你的这行出现问题了，byTagName 是对象类型，并不是类名。
如果不能这样这样取，那取值应该注意那些？谢谢各位了var otab=document.getElementById('tab');
var obox=otab.getElementByTagName('box');<div id="tab">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div></div>
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>
getElementById()通过id获得单个元素
getElementsByName()通过html元素名称获得名称，返回的是一个数组，因为同一张html页面中html元素的名称可以相同
getElementsByTagName()通过html标签名获得元素如 div,ul ,li ,p , table ,span等等都可以，返回的是一个数组，原因跟getElementsByName相同