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

大家?guī)臀铱纯茨睦锍隽藛栴}

<!DOCTYPE html><html><head lang="en">??? <meta charset="UTF-8">??? <title>實踐題 - 選項卡</title>??? <style type="text/css">???? /* CSS樣式制作 */???????? *{padding:0px; margin:0px; font:14px normal "microsoft yahei";}?????? #div1{??????? width:350px;padding:5px;height:150px;margin:20px;?????? }?????? #div1 ul{??????????? list-style:none;display: block;??????????? height:45px;line-height:45px;??????????? border-bottom:2px saddlebrown solid;?????? }?????? #div1 ul li{?????????? display:inline-block;?????????? list-style:none;?????????? width:80px; height:35px;line-height:35px;?? /*line-height與height相同時表示文字垂直居中*/?????????? border:1px #c0c0c0 solid; margin:2px;?????????? background-color: #ff8000; float:left;?????????? text-align: center;?????? }?????? .hide{display:none;}?????? #div1 ul .li1{background-color: #00ffff}?????????? </style>??? <script type="text/javascript">?????? // JS實現(xiàn)選項卡切換??????? window.onload=function(){??? var div1=document.getElementById("div1");??? var ul=div1.getelementsByTagName("ul")[0];??? var lis=ul.getElementsByTagName("li");??? var divs=div1.getElementsByTagName("div");???? for(var i=0,len=lis.length;i<len;i++){???????? lis[i].index=i;??????? lis[i].onclick=function(){??????????? for(var j=0;j<len;j++){??????????????? divs[j].className="hide";??????????????? lis[j].className="";??????????????? }??????????????? divs[this.index].className="";??????????????? this.className="li1";??????? }???? }??? }??? </script></head><body><div id="div1">??? <ul>??????? <li class="li1">房產</li>??????? <li>家具</li>??????? <li>二手房</li>??? </ul>???? <div >??????? <a href="javascript:;">275萬購昌平鄰鐵三居總價20萬買一居</a><br>??????? <a href="javascript:;">200萬內購五環(huán)三居 140萬安家東三環(huán) </a><br>??????? <a href="javascript:;">北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平</a><br>??????? <a href="javascript:;">京樓盤直降5000 中信府公園樓王現(xiàn)房</a><br>??? </div>??? <div class="hide">??????? <a href="javascript:;">40平出租屋大改造美少女的混搭小窩</a><br>??????? <a href="javascript:;">經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生</a><br>??????? <a href="javascript:;">新中式的酷色溫情 66平撞色活潑家居</a><br>??????? <a href="javascript:;">瓷磚就像選好老婆衛(wèi)生間煙道的設計</a><br>??? </div>??? <div class="hide">??????? <a href="javascript:;">通州豪華3居260萬二環(huán)稀缺2居250w甩</a><br>??????? <a href="javascript:;">西3環(huán)通透2居290萬 130萬2居限量搶購</a><br>??????? <a href="javascript:;">黃城根小學學區(qū)僅260萬 121平70萬拋!</a><br>??????? <a href="javascript:;">獨家別墅280萬蘇州橋2居優(yōu)惠價248萬</a><br>??? </div></div> </body></html>