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

如果又不會(huì)的，可以借鑒一下我的

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實(shí)踐題?-?選項(xiàng)卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/??
?*{padding:0px;margin:0px;font:12px?normal;font-family:"Microsoft?Yahei";}?
?a{text-decoration:none;color:#336699;}
?a:hover{text-decoration:none;color:black;}
?#tab{width:270px;height:150px;margin:20px;padding:5px;}
#tab?ul{list-style:none;display:;border-bottom:2px?#C88?solid;height:30px;line-height:30px;}

#tab?ul?li
???{background:#FFF;cursor:pointer;float:left;list-style:none;height:29px;line-height:29px;padding:0px?10px;margin:0px?10px;border:1px?solid?#bbb;border-bottom:2px?solid?#c88;}
????
#tab?ul?li.on{border-top:2px?solid?saddlebrown;border-bottom:2px?solid?#fff;}

#tab?div{height:100px;width:250px;line-height:24px;border:1px?solid?#336699;padding?:10px;}

.hide{display:none;}

????</style>
????<script?type="text/javascript">
????//?JS實(shí)現(xiàn)選項(xiàng)卡切換
????window.onload=function(){
????????var?myTab=document.getElementById("tab");
????????var?myUl=myTab.getElementsByTagName("ul")[0];
????????var?myLi=myUl.getElementsByTagName("li");
????????var?myDiv=myTab.getElementsByTagName("div");
????????for(var?i=0;i<myLi.length;i++)
????????{
????????????myLi[i].index=i;
????????????myLi[i].onclick=function()
????????????{
????????????????for(var?j=0;j<myLi.length;j++)
????????????????{
????????????????????myLi[j].className="off";
????????????????????myDiv[j].className="hide";
????????????????}
????????????????this.className="on";
????????????????myDiv[this.index].className="show";
????????????}
????????}
????}
????</script>
?
</head>
<body>
<!--?HTML頁(yè)面布局?-->
??<div?id="tab">
?????<ul>
?????????<li?class="off">房產(chǎn)</li>
?????????<li?class="on">家居</li>
?????????<li?class="off">二手房</li>
?????</ul>?

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