                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

標準答案！

<!DOCTYPE?html>
<html>
<head?lang="en">
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</title>
????<style?type="text/css">
????????/*?CSS樣式制作?*/
????????.total?{
????????????position:?relative;
????????}
????????input[type="button"]?{
????????????border:?none;
????????????padding:?0px;
????????????outline:?none;
????????????width:?80px;
????????????height:?30px;
????????????background:?#f2f2f2;
????????}
????????ul?{
????????????margin:?0px;
????????????position:?absolute;
????????????z-index:?999;
????????????top:?0px;
????????????left:?2px;
????????}
????????li?{
????????????width:?80px;
????????????height:?30px;
????????????text-align:?center;
????????????line-height:?30px;
????????????background:?#f2f2f2;
????????????display:?inline-block;
????????}
????????li.active?{
????????????z-index:?999;
????????????border-left:?2px?solid?#0ccccc;
????????????border-right:?2px?solid?#0ccccc;
????????????border-top:?5px?solid?#0ccccc;
????????????border-bottom:?5px?solid?#f2f2f2;
????????}
????????li.disable?{
????????????z-index:?1;
????????????padding-top:?4px;
????????????border-left:?1px?solid?#d2d2d2;
????????????border-right:?1px?solid?#d2d2d2;
????????????border-top:?1px?solid?#d2d2d2;
????????????border-bottom:?5px?solid?#0ccccc;
????????}
????????.con?{
????????????position:?absolute;
????????????z-index:?99;
????????????width:?300px;
????????????height:?180px;
????????????position:?relative;
????????????top:?35px;
????????????left:?2px;
????????????background:?#f2f2f2;
????????????margin-left:?30px;
????????????padding-left:?7px;
????????????border-left:?2px?solid?#0ccccc;
????????????border-right:?2px?solid?#0ccccc;
????????????border-top:?5px?solid?#0ccccc;
????????????border-bottom:?2px?solid?#0ccccc;
????????????display:?none;
????????}
????</style>

????<script?type="text/javascript">
????????window.onload?=?function?()?{
????????????var?cons?=?document.querySelectorAll(".con");
????????????var?links?=?document.querySelectorAll("li");
????????????Array.from(cons).forEach((c,?i)?=>?{
????????????????c.style.display?=?"none";
????????????????links[i].className?=?"disable";
????????????????if?(i?==?0)?{
????????????????????cons[i].style.display?=?"block";
????????????????????links[i].className?=?"active";
????????????????}
????????????});
????????????Array.from(links).forEach((link,?index,?ls)?=>?{
????????????????link.addEventListener("click",?function?(event)?{
????????????????????Array.from(cons).forEach((c,?i)?=>?{
????????????????????????c.style.display?=?"none";
????????????????????????links[i].className?=?"disable";
????????????????????});
????????????????????cons[index].style.display?=?"block";
????????????????????link.className?=?"active";
????????????????});
????????????});
????????}
????</script>

</head>
<body>
????<!--?HTML頁面布局?-->
????<div?class="total">
????????<div?class="con">
????????????<p>275萬購昌平鄰鐵三居?總價20萬買一居</p>
????????????<p>200萬內購五環三居?140萬安家東三環</p>
????????????<p>北京首現零首付樓盤?53萬購東5環50平</p>
????????????<p>京樓盤直降5000?中信府?公園樓王現房</p>
????????</div>
????????<div?class="con">
????????????<p>40平出租屋大改造?美少女的混搭小窩</p>
????????????<p>經典清新簡歐愛家?90平老房煥發新生</p>
????????????<p>新中式的酷色溫情?66平撞色活潑家居</p>
????????????<p>瓷磚就像選好老婆?衛生間煙道的設計</p>
????????</div>
????????<div?class="con">
????????????<p>通州豪華3居260萬?二環稀缺2居250w甩</p>
????????????<p>西3環通透2居290萬?130萬2居限量搶購</p>
????????????<p>黃城根小學學區僅260萬?121平70萬拋!</p>
????????????<p>獨家別墅280萬?蘇州橋2居優惠價248萬</p>
????????</div>
????????<ul>
????????????<li><input?type="button"?value="房產:"?/></li>
????????????<li><input?type="button"?value="家居:"?/></li>
????????????<li><input?type="button"?value="二手房:"?/></li>
????????</ul>
????</div>
</body>
</html>