关于window.onload的问题

一般把script放在body的最下方就可以获取到body里的元素了，可是我做的这个选项卡效果把script放在body的最下面了，可是去掉window.onload之后，效果就出不来了，这是怎么回事

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style-type: none;
        }
        #container{
            width:400px;
            height:250px;
            position: relative;
        }
        #top li{
            width:100px;
            height:50px;
            float: left;
        }
        #bottom li{
            width:400px;
            height:200px;
            position: absolute;
            left:0;
            top:50px;
            display: none;
        }
        .first{
            background: red;
        }
        .second{
            background: blue;
        }
        .third{
            background: purple;
        }
        .four{
            background: pink;
        }

        #bottom li.first{
            display: block;
        }

    </style>
</head>
<body>

<div id="container">
    <ul id="top">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul id="bottom">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<script>
    window.onload= function () {

        var top = document.getElementById("top"),
            top_li = top.getElementsByTagName("li"),
            bottom = document.getElementById("bottom"),
            bottom_li = bottom.getElementsByTagName("li");

        for (var i = 0; i<top_li.length;i++){
            top_li[i].index = i;
            top_li[i].onclick = function(){

                for (var j = 0;j<bottom_li.length;j++){
                    bottom_li[j].style.display = "none";
                }
                bottom_li[this.index].style.display = "block";

            };
        }
    }

</script>

</body>
</html>

qq_烟火里的尘埃_0

浏览 1563回答 3

3回答

stone310

思路没错的！问题出在top这个变量名字上，你会发现这一段程序在IE下能完美执行，因为window.onload去掉后，变量为全局变量，而chrome和FF已经把top这个变量定义了，所以不能再用top作为全局变量，你随便换个名字都可以了

0 0

田心枫

去掉js都没加载进来，当然不起作用

0 0

随时随地看视频慕课网APP