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

雖然用的代碼不太高級(jí)，但是效果還是出來(lái)了，思路很簡(jiǎn)單的

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style>
???????#ff,#jj,#er{
????????????border:1px?solid?black;
?border-bottom:2px?solid?white;
?width:70px;
?height:30px;
?margin-left:20px;
?text-align:center;
?line-height:30px;
?margin-top:20px;
?background-color:?white;
?display:inline-block;

?}
???????#nn{
???????????width:340px;
?height:120px;
?border:1px?solid?cornflowerblue;
?border-top:2px?solid?#cd3d34;
?text-align:?center?;
?padding-top:20px;
?line-height:25px;
?margin-left:15px;
?margin-top:-2px;
?}
????????#n2,#n3{
????????????display:?none;
?}
????????#ff{
????????????border-top:2px?solid?#cd3d34;

?}
????????#jj,#er{
????????????border-bottom:2px?solid?#cd3d34;
?}

????</style>
</head>
<body>
<div?id="cc"?>
????<span?id="ff"?onclick="f1()">房產(chǎn)</span>
????<span?id="jj">家居</span>
????<span?id="er">二手房</span>
</div>
<div?id="nn">
<div?id="n1">
?275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買(mǎi)一居<br>
?200萬(wàn)內(nèi)購(gòu)五環(huán)三居?140萬(wàn)安家東三環(huán)<br>
?北京首現(xiàn)零首付樓盤(pán)?53萬(wàn)購(gòu)東5環(huán)50平<br>
?京樓盤(pán)直降5000?中信府?公園樓王現(xiàn)房
</div>
<div?id="n2">
?40平出租屋大改造?美少女的混搭小窩<br>
?經(jīng)典清新簡(jiǎn)歐愛(ài)家?90平老房煥發(fā)新生<br>
?新中式的酷色溫情?66平撞色活潑家居<br>
?瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)
</div>
<div?id="n3">
?通州豪華3居260萬(wàn)?二環(huán)稀缺2居250w甩<br>
?西3環(huán)通透2居290萬(wàn)?130萬(wàn)2居限量搶購(gòu)<br>
?黃城根小學(xué)學(xué)區(qū)僅260萬(wàn)?121平70萬(wàn)拋!<br>
?獨(dú)家別墅280萬(wàn)?蘇州橋2居優(yōu)惠價(jià)248萬(wàn)
</div>
</div>
<script>
?var?f=document.getElementById("ff");
?var?j=document.getElementById("jj");
?var?e=document.getElementById("er");
?var?n1=document.getElementById("n1");
?var?n2=document.getElementById("n2");
?var?n3=document.getElementById("n3");
?function?f1()?{
????????f.style.borderTop="2px?solid?#cd3d34";
?j.style.borderTop="1px?solid?black";
?e.style.borderTop="1px?solid?black";
?f.style.borderBottom="2px?solid?white";
?j.style.borderBottom="2px?solid?#cd3d34";
?e.style.borderBottom="2px?solid?#cd3d34";
?n1.style.display="block";
?n2.style.display="none";
?n3.style.display="none";
?}
????j.onclick=function?()?{
????????j.style.borderTop="2px?solid?#cd3d34";
?f.style.borderTop="1px?solid?black";
?e.style.borderTop="1px?solid?black";
?j.style.borderBottom="2px?solid?white";
?f.style.borderBottom="2px?solid?#cd3d34";
?e.style.borderBottom="2px?solid?#cd3d34";
?n2.style.display="block";
?n1.style.display="none";
?n3.style.display="none";
?}
????e.onclick=function?()?{
????????e.style.borderTop="2px?solid?#cd3d34";
?f.style.borderTop="1px?solid?black";
?j.style.borderTop="1px?solid?black";
?e.style.borderBottom="2px?solid?white";
?f.style.borderBottom="2px?solid?#cd3d34";
?j.style.borderBottom="2px?solid?#cd3d34";
?n3.style.display="block";
?n2.style.display="none";
?n1.style.display="none";
?}
</script>
</body>