自己做的js选项卡报错，无法获取未定义或 null 引用的属性“style”是什么原因
<styletype="text/css">#pic{margin-top:16px;display:none;}.hover{background:#999;}</st...
<style type="text/css">
#pic{margin-top:16px;display:none;}
.hover{background:#999;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('con');
var oLi=oDiv.getElementsByTagName('li');
var aDiv=document.getElementById('right');
var lDiv=aDiv.getElementsByTagName('div');
for(var i=0;i<oLi.length;i++){
oLi[i].index='i';
oLi[i].onmouseover=function(){
for(var i=0;i<oLi.length;i++){
oLi[i].className='';
lDiv[i].style.display='none';
}
this.className='hover';
lDiv[this.index].style.display='block';就是这一行代码出错了，无法获取未定义或 null 引用的属性“style”，但是鼠标移上去所有的div都隐藏了，实在是不知道原因，请大侠们指点一二；
}
}
};
</script>
</head>
<body>
<h3>JS实现Tab选项卡效果</h3>
<div id="con">
<div id="left">
<ul id="list">
<li class="hover">
<img src="01.jpg" />
</li>
<li>
<img src="08.jpg" />
<a href="#">服部平次</a>
</li></ul>
</div>
<div id="right">
<div id="pic" align="middle" style="display:block;" >
<img src="1.jpg" />
</body> 展开
#pic{margin-top:16px;display:none;}
.hover{background:#999;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('con');
var oLi=oDiv.getElementsByTagName('li');
var aDiv=document.getElementById('right');
var lDiv=aDiv.getElementsByTagName('div');
for(var i=0;i<oLi.length;i++){
oLi[i].index='i';
oLi[i].onmouseover=function(){
for(var i=0;i<oLi.length;i++){
oLi[i].className='';
lDiv[i].style.display='none';
}
this.className='hover';
lDiv[this.index].style.display='block';就是这一行代码出错了，无法获取未定义或 null 引用的属性“style”，但是鼠标移上去所有的div都隐藏了，实在是不知道原因，请大侠们指点一二；
}
}
};
</script>
</head>
<body>
<h3>JS实现Tab选项卡效果</h3>
<div id="con">
<div id="left">
<ul id="list">
<li class="hover">
<img src="01.jpg" />
</li>
<li>
<img src="08.jpg" />
<a href="#">服部平次</a>
</li></ul>
</div>
<div id="right">
<div id="pic" align="middle" style="display:block;" >
<img src="1.jpg" />
</body> 展开
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>recursion</title>
<style type="text/css">
#pic {
margin-top: 16px;
display: none;
}
.hover {
background: #999;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
var oDiv = document.getElementById ('con');
var oLi = oDiv.getElementsByTagName ('li');
var aDiv = document.getElementById ('right');
var lDiv = aDiv.getElementsByTagName ('div');
var anonymous = function (i)
{
oLi[i].onmouseover = function ()
{
if (oLi.index >= 0)
{
oLi[oLi.index].className = '';
lDiv[oLi.index].style.display = 'none';
}
this.className = 'hover';
lDiv[i].style.display = 'block';//就是这一行代码出错了，无法获取未定义或 null 引用的属性“style”，但是鼠标移上去所有的div都隐藏了，实在是不知道原因，请大侠们指点一二；
oLi.index = i;
}
};
for ( var i = 0; i < oLi.length; i++)
{
anonymous (i);
}
};
</script>
</head>
<body>
<h3>JS实现Tab选项卡效果</h3>
<div id="con">
<div id="left">
<ul id="list">
<li class="hover"><img src="01.jpg" /></li>
<li><img src="08.jpg" /> <a href="#">服部平次</a></li>
</ul>
</div>
<div id="right">
<div id="pic" align="middle" style="display: block;">
<img src="1.jpg" />
</div>
<div id="x" align="middle" style="display: block;">
</div>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
首先你的oLi[i].index='i';这句得写成oLi[i].index=i;
其次你的oLi的长度是2,lDiv的长度是1,但是你的两层循环都是按照oLi.length的循环来做的,所以对于lDiv来说越界了,你需要在后面再加一个div才行
其次你的oLi的长度是2,lDiv的长度是1,但是你的两层循环都是按照oLi.length的循环来做的,所以对于lDiv来说越界了,你需要在后面再加一个div才行
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
问题在这一行上：
oLi[i].index='i';
把i两边的引号去掉，改成
oLi[i].index=i;
就好了。
oLi[i].index='i';
把i两边的引号去掉，改成
oLi[i].index=i;
就好了。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
