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

大概完美運(yùn)行吧，里面body的樣式可以去掉

<!doctype html>
<html>
?<head>
? <meta charset="UTF-8">
? <meta name="Generator" content="EditPlus?">
? <meta name="Author" content="">
? <meta name="Keywords" content="">
? <meta name="Description" content="">
? <title>Document</title>
?<style type="text/css">
?*{margin:0;padding:0;font-size:14px}
?.first>li{height:23px;width:58px;float:left;margin:auto 5px;text-align:center;border:1px solid gray;border-bottom:2px solid brown;line-height:2em;list-style-type:none;}
?.first>li>.second>ul{height:142px;width:272px;position:absolute;left:0;top:24px;text-align:left;border:1px solid gray;border-top:2px solid brown;list-style-type:none;padding:5px;z-index:-1;}
?.first>li>.second>ul li{line-height:2.5em}
</style>
?
?<script type="text/javascript">
?function Head()
?{
?var b=document.getElementsByName("article");
?b[0].style.display="none";
?b[1].style.display="block";
?b[2].style.display="none";
?} function Body()
?{
?var b=document.getElementsByName("article");
?for(var i=0;i<b.length;i++)
?{b[i].style.display="none";
? b[i].parentNode.style.borderTop="1px solid gray";
? b[i].parentNode.style.borderBottom="2px solid brown";
?} }function Body1(i)
?{var li=i.parentNode;
? var div=li.childNodes[3];
? div.style.display="block";
? li.style.borderTop="1px solid brown";
? li.style.borderBottom="2px solid #fff"
? }
? </script>
?</head>
?<body onload="Head()">
? <div>
? <ul class="first">
? <li>
? <a style="cursor:pointer" onclick="Body();Body1(this);">房產(chǎn)</a>
? <div class="second" name="article">
? <ul>
? <li><a href="#">275萬(wàn)購(gòu)昌平鄰鐵三居總價(jià)20萬(wàn)買(mǎi)一居</a></li>
? <li><a href="#">200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</a></li>
? <li><a href="#">北京首現(xiàn)零首付樓盤(pán) 53萬(wàn)購(gòu)東5環(huán)50平</a></li>
? <li> <a href="#">京樓盤(pán)直降5000 中信府公園樓王現(xiàn)房</a></li>
? </ul>
? </div>
? </li>
? <li>
? <a style="cursor:pointer" onclick="Body();Body1(this);">家居</a>
? <div class="second" name="article">
? <ul>
? <li><a href="#">40平出租屋大改造美少女的混搭小窩</a></li>
? <li><a href="#">經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生</a></li>
? <li><a href="#">新中式的酷色溫情 66平撞色活潑家居</a></li>
? <li><a href="#">瓷磚就像選好老婆衛(wèi)生間煙道的設(shè)計(jì)</a></li>
? </ul>
? </div>
? </li>
? <li>
? <a style="cursor:pointer" onclick="Body();Body1(this);">二手房</a>
? <div class="second" name="article">
? <ul>
? <li><a href="#">通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩</a></li>
? <li><a href="#">西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)</a></li>
? <li><a href="#">黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋</a></li>
? <li><a href="#">獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</a></li>
? </ul>
? </div>
? </li>
? </ul>
? </div>
?</body>
</html>