                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

按照评论第二的大佬代码敲出来然而运行不成功。求解，而且也不是很了解用index获取那个属性值是要干嘛。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个实践</title>
    <style type="text/css">
        *{margin:0;padding:0;font:12px normal;font-family: 微软雅黑,serif;}
        #div1{
          width: 290px;height: 150px;padding: 5px;margin: 20px;
        }/*大框定义类型*/
        #div1 ul{
          list-style-type: none; display: block;height: 30px;line-height: 30px;
        }/*div大框里面的ul标签样式*/
        #div1 ul li{
            float: left;/*浮动样式*/width: 60px;height: 28px;/*li块元素的样式设置*/line-height: 28px;text-align: center;
            display: inline-block;margin: 0px 3px;border: 1px solid #aaaaaa;border-bottom: none;cursor: pointer;/*光标属性*/
            background-color: #ffffff;list-style:none;
        }
        /*单个li标签样式设置*/
        #div1 ul li.on{
            border-top: 2px solid saddlebrown;border-bottom: 2px solid #ffffff;
        }/*显示的标签页上下边框设置*/
        #div1 div{
            height: 120px;line-height: 25px;border: 1px solid #336699;border-top: 2px saddlebrown;padding: 5px;
        }
        .hid{
            display: none;
        }
    </style>
    <script type="text/javascript">
        window.onload=function () {


            var a = document.getElementById("div1");
            var li = document.getElementsByTagName("li");
            var div = a.document.getElementsByTagName("div");

            for (var i = 0; i < li.length; i++) {
                li[i].index = i;
                li[i].onclick = function () {
                    for (var n = 0; n < li.length; n++) {
                        li[n].className = "";
                        div[n].className = "hid";
                    }
                    this.className="on";
                    div[this.index].className = "";
                }
            }
        }
    </script>

</head>
<body>
<div id="div1">
<ul>
    <li class="on" >房产</li><li>家居</li><li>二手房</li>
</ul>
    <div >275万购昌平邻铁三居 总价20万买一居<br>
        200万内购五环三居 140万安家东三环<br>
        北京首现零首付楼盘 53万购东5环50平<br>
        京楼盘直降5000 中信府 公园楼王现房</div>

    <div class="hid" >40平出租屋大改造 美少女的混搭小窝<br>
        经典清新简欧爱家 90平老房焕发新生<br>
        新中式的酷色温情 66平撞色活泼家居<br>
        瓷砖就像选好老婆 卫生间烟道的设计<br></div>

    <div class="hid">通州豪华3居260万 二环稀缺2居250w甩<br>
    西3环通透2居290万 130万2居限量抢购<br>
    黄城根小学学区仅260万 121平70万抛!<br>
    独家别墅280万 苏州桥2居优惠价248万<br></div>

</div>
</body>