实现切换出现了小问题? 是循环除了问题吗

源自：10-1 编程挑战

实现切换出现了小问题? 是循环除了问题吗

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */
    body {
       margin: 0;
       padding: 100px;

}
    .clearfix:before,
    .clearfix:after {
       content: "";
       display: block;
       height: 0;
       visibility: hidden;
       clear: both;

    }
    ul {
       list-style:none;
       padding: 0;
       margin: 0;
    }
    li {
       float: left;
       padding: 5px 10px;
       margin-right: 5px;
       border: solid 1px #DDD;
       border-bottom: none;
       cursor: pointer;
    }
    .tab-content {
       width: 280px;
       border: 1px solid black;
       border-top: 2px red solid;
       padding: 10px 10px 20px;
       height: 100px;
       margin-top: -2px;
    }
    .content{
       display: none;
    }


    </style>

   <script type="text/javascript">

   // JS实现选项卡切换
    window.onload = function () {
        tab();
    }
    function tab() {
        var li = document.getElementsByTagName("li");
        var content = document.getElementsByClassName("content");
        for (var i = 0; i < li.length; i ++) {
            li[i].onclick = function () {
                // document.write("hi");
                content[i].setAttribute("this.style.display","block");//这里的代码实现不了,为什么呢?
            }
        }
    }


   </script>


</head>
<body>

   <ul>
       <li>房产</li>
       <li>家居</li>
       <li>二手房</li>
   </ul>
   <section>
       <div>
           <p>
               275万购昌平邻铁三居总价20万买一居<br>
               200万内购五环三居 140万安家东三环<br>
               北京首现零首付楼盘 53万购东5环50平<br>
               京楼盘直降5000 中信府公园楼王现房
           </p>
       </div>
       <div>
           <p>
               40平出租屋大改造美少女的混搭小窝<br>
                经典清新简欧爱家 90平老房焕发新生<br>
                新中式的酷色温情 66平撞色活泼家居<br>
                瓷砖就像选好老婆卫生间烟道的设计
            </p>
       </div>
       <div>
           <p>
               通州豪华3居260万二环稀缺2居250w甩<br>
                西3环通透2居290万 130万2居限量抢购<br>
                黄城根小学学区仅260万 121平70万抛<br>
                独家别墅280万苏州桥2居优惠价248万
           </p>
       </div>
   </section>

</body>
</html>

提问者：OscarK 2016-11-16 17:29

实现切换出现了小问题? 是循环除了问题吗

个回答