<!DOCTYPE html><html><head>? ? <meta charset="UTF-8">? ? <title>實踐題 - 選項卡</title>? ? <style type="text/css">? ? ?/* CSS樣式制作 */ ?? ? ? ?*{? ? ? ? ? ?margin:0;? ? ? ? ? ?padding:0;? ? ? ?}? ? ? ?.nav{?? ? ? ? ? ?list-style:none;? ? ? ? ? ?margin-top:20px;? ? ? ? ? ?position:relative;?? ? ? ?}? ? ? ?.nav li{? ? ? ? ? ?width:50px;? ? ? ? ? ?height:20px;? ? ? ? ? ?float:left;? ? ? ? ? ?border-top:1px solid #ccc;? ? ? ? ? ?border-right:1px solid #ccc;? ? ? ? ? ?border-left:1px solid #ccc;? ? ? ? ? ?margin:0 3px;? ? ? ? ? ?padding:8px;? ? ? ? ? ?line-height:20px;? ? ? ? ? ?text-align:center;? ? ? ? ? ?cursor:pointer;? ? ? ?}? ? ? ?.nav .li-active{? ? ? ? ? ?border-top:2px solid #e00;? ? ? ? ? ?border-bottom:2px solid #fff;? ? ? ?}? ? ? ?.content{? ? ? ? ? ?width:300px;? ? ? ? ? ?height:200px;? ? ? ? ? ?margin-top:-2px;? ? ? ? ? ?border-left:1px solid #00d;? ? ? ? ? ?border-right:1px solid #00d;? ? ? ? ? ?border-bottom:1px solid #00d;? ? ? ? ? ?border-top:2px solid #e00;? ? ? ?}? ? ? ?.content .desc{? ? ? ? ? ?position:absolute;? ? ? ? ? ?display:none;? ? ? ? ? ?font:14px/28px Microsoft Yahei;? ? ? ? ? ?padding:10px;? ? ? ?}? ? ? ?.content .desc:first-child{? ? ? ? ? ?display:block;? ? ? ?}? ? ? ?.clearfix::before,? ? ? ?.clearfix::after{? ? ? ? ? ?content:".";? ? ? ? ? ?display:block;? ? ? ? ? ?height:0;? ? ? ? ? ?visibility:hidden;? ? ? ?}? ? ? ?.clearfix:after{? ? ? ? ? ?clear:both;? ? ? ?}? ? </style>? ? <script type="text/javascript">? ? // JS實現(xiàn)選項卡切換? ? window.onload=function(){? ? ? ? var nav=document.getElementById("nav");? ? ? ? var content=document.getElementById("content");? ? ? ? var lists=nav.getElementsByTagName("li");? ? ? ? var descs=content.getElementsByTagName("p");? ? ? ? var i=0;? ? ? ? for(;i<lists.length;i++){?? ? ? ? ? ? lists[i].onclick=change(this,i);?? ? ? ? } ?? ? ? ? function change(o,num){? ? ? ? ? ? console.log(o+num);? ? ? ? ? ? clearStyle();? ? ? ? ? ? o.className="li-active";? ? ? ? ? ? descs[num].style.display="block";? ? ? ? }? ? ? ? function clearStyle(){?? ? ? ? ? ? for(var i=0;i<descs.length;i++){? ? ? ? ? ? ? ? lists[i].className="";? ? ? ? ? ? ? ? descs[i].style.display="none";? ? ? ? ? ? }? ? ? ? }? ? }? ? </script></head><body><!-- HTML頁面布局 --><div>? ? <ul class="nav clearfix" id="nav">? ? ? ? <li>房產(chǎn)</li>? ? ? ? <li>家居</li>? ? ? ? <li>二手房</li>? ? </ul>? ? <div id="content">? ? ? ? <p>? ? ? ? ? ?275萬購昌平鄰鐵三居 總價20萬買一居<br/>? ? ? ? ? ?200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)<br/>? ? ? ? ? ?北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平<br/>? ? ? ? ? ?京樓盤直降5000 中信府 公園樓王現(xiàn)房<br/>? ? ? ? </p>? ? ? ? <p>?? ? ? ? ? ? 40平出租屋大改造 美少女的混搭小窩<br/>? ? ? ? ? ? 經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生<br/>? ? ? ? ? ? 新中式的酷色溫情 66平撞色活潑家居<br/>? ? ? ? ? ? 瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計<br/>? ? ? ? </p>? ? ? ? <p>? ? ? ? ? ?通州豪華3居260萬 二環(huán)稀缺2居250w甩<br/>? ? ? ? ? ?西3環(huán)通透2居290萬 130萬2居限量搶購<br/>? ? ? ? ? ?黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!<br/>? ? ? ? ? ?獨家別墅280萬 蘇州橋2居優(yōu)惠價248萬<br/>? ? </div></div></body></html>
lists[i].onclick=change(this,i); 瀏覽器打印this為window對象，還沒有點擊，change就已經(jīng)執(zhí)行了
Emily夢
2017-03-29 14:09:17
