phpstudy集成环境

 首页 > 求大神们看看这段编的问题出在哪里？

求大神们看看这段编的问题出在哪里？

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    #div1 div{width: 200px; height: 300px; display: none; background: grey;}
    .active{background: yellow;}
</style>
<script type="text/javascript">
window.onload=function () 
{
    var oDiv=document.getElementById('div1');
    var iBut=oDiv.getElementsByTagName('input');
    var aDiv=oDiv.getElementsByTagName('div');
    for(i in iBut)
    {
        iBut[i].index=i;
        iBut[i].onclick=function()
        {
            for(i in iBut)
                {
                    iBut[i].className="";
                aDiv[i].style.display="none";
                }
            this.className="active";
            aDiv[this.index].style.display="block";
        }
    }
}
</script>
</head>
<body>
<div id="div1">
    <input type="button" value="教育">
    <input type="button" value="培训">
    <input type="button" value="招生">
    <input type="button" value="出国">
    <div style="display:block">1111</div>
    <div>2222</div>
    <div>3333</div>
    <div>4444</div>
</div>
</body>
</html>

aDiv[i].style.display="none";请问为何这一句浏览器一直报错呢，找了2小时都没找到问题所在。。

一楼说得对，楼主需要研究下for-in语句。这里先给出解决方法，希望楼主能好好翻阅一下文档。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
    #div1 div{width: 200px; height: 300px; display: none; background: grey;}
    .active{background: yellow;}
</style>
<script type="text/javascript">
window.onload=function () 
{
    var oDiv=document.getElementById('div1');
    var iBut=oDiv.getElementsByTagName('input');
    var aDiv=oDiv.getElementsByTagName('div');
    for(i in iBut)
    {
        if (iBut.hasOwnProperty(i)) {
            iBut[i].index=i;
            iBut[i].onclick=function(){
                for(j in iBut){
                    if (iBut.hasOwnProperty(j)) {
                        // alert(j);
                        iBut[j].className="";
                        aDiv[j].style.display="none";
                    }
            this.className="active";
            aDiv[this.index].style.display="block";
                }
            }
        // alert(i);
        }
    }
}
</script>
</head>
<body>
<div id="div1">
    <input type="button" value="教育">
    <input type="button" value="培训">
    <input type="button" value="招生">
    <input type="button" value="出国">
    <div style="display:block">1111</div>
    <div>2222</div>
    <div>3333</div>
    <div>4444</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #div1 div{width: 200px; height: 300px; display: none; background: grey;}
        .active{background: yellow;}
    </style>
    <script type="text/javascript">
    window.onload=function () 
    {
        var oDiv=document.getElementById('div1');
        var iBut=oDiv.getElementsByTagName('input');
        var aDiv=oDiv.getElementsByTagName('div');
        for(i in iBut)
        {
            iBut[i].index=i;
            iBut[i].onclick=function()
            {
                for(j in iBut)
                {
                    console.log(j);
                    iBut[j].className="";
                    if(j<=3 && typeof(aDiv[j].style) != "undefined") {
                        aDiv[j].style.display="none";
                    }
                }
                this.className="active";
                aDiv[this.index].style.display="block";
            }
        }
    }
    </script>
</head>
<body>
    <div id="div1">
        <input type="button" value="教育">
        <input type="button" value="培训">
        <input type="button" value="招生">
        <input type="button" value="出国">
        <div style="display:block">1111</div>
        <div>2222</div>
        <div>3333</div>
        <div>4444</div>
    </div>
</body>
</html>

你检查下你for(i in iBut) 输出的是什么就知道哪里错误了。
输出的不止是下标。

1楼正解，还会取出item、namedItem、length三个属性。也可以用isNaN()判断一下。用楼上的hasOwnProperty()更好

题主不如研究下for的用法？

你的iBut是一个HTMLCollection，使用for对其循环的的话，除了以数字标注的子项以外，还有item、namedItem、length三个属性会被取出来。

你的这个需求，建议用foreach。

不要用for in遍历数组，全部统一采用标准的for循环变量数组( 我们无法保证我们引入的js是否会采用prototype扩展原生的Array )，建议for in只用来循环json

  for(i in iBut)   //第一个变量用了I
    {
        iBut[i].index=i;
        iBut[i].onclick=function()
        {
            for(i in iBut)  //第二个循环也用了变量I
                {
                    iBut[i].className="";
                aDiv[i].style.display="none";
                }

变量冲突了

你得先说说在什么版本浏览器里报了什么错吧

【热门文章】
【热门文章】