这段代码哪错了吗,执行不了!
<<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function changeBody(){
var mycars = new Array()
mycars[0] = "iDBody1"
mycars[1] = "iDBody2"
mycars[2] = "iDBody3"
for (i=0;i<=mycars.length;i++)
{
if(document.getElementById('mycars[i]').style.display = "")
{
}
else{
document.getElementById('mycars[i]').style.display = "none";
}
}
}
</script>
</head>
<body>
<a href="#" onmousemove="changeBody()">模块A</a>
<a href="#" onmousemove="changeBody()">模块B</a>
<a href="#" onmousemove="changeBody()">模块C</a>
<ul style="list-style: none;">
<li style="display: none;float: left;" id="iDBody1">
模块(一)的相关内容
</li>
<li style="display: none; float: left;" id="iDBody2">
<a href="#">模块(二)的相关内容</a>
<ul style="list-style: none;">
<li style="float: left"><a href="#">dsfldsfdsflk </a> </li>
<li style="float: left"><a href="#">dsfdsfdssd </a></li>
</ul>
</li>
<li style="display: none;float: left;" id="iDBody3">
模块(三)的相关内容
</li>
</ul>
</body>
</html>
[解决办法]
楼上说的是一个写法的错误,但做多导致判断恒为真,不至于出错
真正会出错的地方是
for (i=0;i<=mycars.length;i++)
{
if(document.getElementById('mycars[i]').style.display = "")//这句会报对象为null
{
}
else{
document.getElementById('mycars[i]').style.display = "none";//同上,获取不到html对象
}
}
页面加载从上到下,这儿写在全局的js会在html元素加载前执行,这时没有生成dom对象,所以获取到的对象是null,
这样改:
setTimeout(function(){
for (i=0;i<=mycars.length;i++)
{
if(document.getElementById('mycars[i]').style.display =="")
{
}
else{
document.getElementById('mycars[i]').style.display = "none";
}
}
},100});
用延时执行的方式避免这个错误
[解决办法]
你说的这些错误我上面都已经指出来了,而且现在的问题是它这段代码没有任何意义,显示的依旧显示,不显示的依旧不会显示,不信你看看这段代码
- JScript code
if(document.getElementById(mycars[i]).style.display =="")//这儿要用比较符号==,同时去掉单引号 { } else{ document.getElementById(mycars[i]).style.display = "none"; }
[解决办法]
函数调用不需用setTimeout,代码上2点错误上面已经说了(变量引用无需引号,比较符号==),主要是设计函数时要想清楚要显示哪些对象,要隐藏哪些对象,下面是改写的例子。
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title></title><script type="text/javascript">//id:要显示的对象idfunction changeBody(id){ var mycars=["iDBody1","iDBody2","iDBody3"]; for(var i=0,len=mycars.length;i<len;i++){ var _id=mycars[i],obj=document.getElementById(_id); if(id==_id) obj.style.display=""; //如果等于指定的id,则显示对象 else obj.style.display="none"; //其他的隐藏 }}</script></head><body> <a href="#" onmousemove="changeBody('iDBody1')">模块A</a><a href="#" onmousemove="changeBody('iDBody2')">模块B</a><a href="#" onmousemove="changeBody('iDBody3')">模块C</a><ul style="list-style: none;"><li style="display: none;float: left;" id="iDBody1"> 模块(一)的相关内容</li><li style="display: none; float: left;" id="iDBody2"> <a href="#">模块(二)的相关内容</a> <ul style="list-style: none;"> <li style="float: left"><a href="#">dsfldsfdsflk </a> </li> <li style="float: left"><a href="#">dsfdsfdssd </a></li> </ul></li><li style="display: none;float: left;" id="iDBody3"> 模块(三)的相关内容</li></ul></body></html>
[解决办法]
function changeBody() {
var mycars = new Array()
mycars[0] = "iDBody1"
mycars[1] = "iDBody2"
mycars[2] = "iDBody3"
for (i = 0; i < mycars.length; i++) {
if (document.getElementById(mycars[i]).style.display == "") {
}
else {
document.getElementById(mycars[i]).style.display = "none";
}
}
}
