盒子传值

<html>
    <head>
        <meta charset = "utf-8">
        <title></title>
        <style type="text/css">

        div {

            width: 1280px;
            height: 100px;
            margin: 0 auto;
            margin-left: 100px;
        }

        li {

            width: 100px;
            height: 100px;
            float: left;
            margin-left: 10px;
            border: 1px solid red;
            line-height: 100px;
            text-align: center;
            font-size: 20px;
        }

        .a1:hover {
            border-top: 1px solid green;
            border-bottom: 1px solid green;
        }

        .a2:hover {
            border-left: 1px solid green;
            border-right: 1px solid green;
        }

        .inter {
            width: 550px;
            height: 200px;
            background-color: pink;
            margin-left: 150px;
            text-align: center;
            line-height: 200px;
            font-size: 100px;
        }


        </style>
    </head>
    <body>

        <div>

            <ul>
                <li class = "a1" id = "b1" onmouseover = "interface(0)"></li>
                <li class = "a2" id = "b2" onmouseover = "interface(1)"></li>
                <li class = "a2" id = "b3" onmouseover = "interface(2)"></li>
                <li class = "a2" id = "b4" onmouseover = "interface(3)"></li>
                <li class = "a1" id = "b5" onmouseover = "interface(4)"></li>
            </ul>
            
        </div>

        <div class = "inter" id = "home">

        </div>

        <script type="text/javascript">

        function $(id){
            return document.getElementById(id);
        }
            
        var a = new Array("第一个盒子",'第二个盒子','第三个盒子','第四个盒子','第五个盒子');

        var b = new Array('b1','b2','b3','b4','b5');
        function interface(canshu){
            for(var i = 0;i < 5;i++) {
                $(b[i]).innerHTML = "";
            }
            $(b[canshu]).innerHTML = a[canshu];
            $('home').innerHTML = a[canshu];
        }

        </script>
        
    </body>
</html>
posted on 2016-10-28 13:35 ljyhyy 阅读(140) 评论(1) 收藏举报