                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

實現切換出現了小問題? 是循環除了問題嗎

<!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>