                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

實(shí)現(xiàn)切換出現(xiàn)了小問題? 是循環(huán)除了問題嗎

<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>實(shí)踐題 - 選項(xiàng)卡</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實(shí)現(xiàn)選項(xiàng)卡切換
? ??? ?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");//這里的代碼實(shí)現(xiàn)不了,為什么呢?
? ??? ??? ??? ?}
? ??? ??? ?}
? ??? ?}

? ??? ??? ?
?? </script>
?? ?
?
</head>
<body>

?? ?<ul>
?? ??? ?<li>房產(chǎn)</li>
?? ??? ?<li>家居</li>
?? ??? ?<li>二手房</li>
?? ?</ul>
?? ?<section>
?? ??? ?<div>
?? ??? ??? ?<p>
?? ??? ??? ??? ?275萬購昌平鄰鐵三居總價(jià)20萬買一居<br>
?? ??? ??? ??? ?200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)<br>
?? ??? ??? ??? ?北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平<br>
?? ??? ??? ??? ?京樓盤直降5000 中信府公園樓王現(xiàn)房
?? ??? ??? ?</p>
?? ??? ?</div>
?? ??? ?<div>
?? ??? ??? ?<p>
?? ??? ??? ??? ?40平出租屋大改造美少女的混搭小窩<br>
?? ??? ??? ???? 經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生<br>
?? ??? ??? ???? 新中式的酷色溫情 66平撞色活潑家居<br>
?? ??? ??? ???? 瓷磚就像選好老婆衛(wèi)生間煙道的設(shè)計(jì)
?? ??? ???? </p>
?? ??? ?</div>
?? ??? ?<div>
?? ??? ??? ?<p>
?? ??? ??? ??? ?通州豪華3居260萬二環(huán)稀缺2居250w甩<br>
?? ??? ??? ???? 西3環(huán)通透2居290萬 130萬2居限量搶購<br>
?? ??? ??? ???? 黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋<br>
?? ??? ??? ???? 獨(dú)家別墅280萬蘇州橋2居優(yōu)惠價(jià)248萬
?? ??? ??? ?</p>
?? ??? ?</div>
?? ?</section>

?
</body>
</html>