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

好好學習！

?<!DOCTYPE?html>?
?<html>?
?<head>??
?<meta?charset="UTF-8">??
?<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">????
?<title>實踐題?-?選項卡</title>????
?<style?type="text/css">???????????
????body?{max-width:?600px;margin:?20px?auto;}???????
????.label-all?{?????width:?500px;?????height:?200px;?}?????
????ul{?????display:?table;?????margin-top:?0;?????}?????
????.nav?{?????height:?20%;?????
???????????????padding-left:?0;????????
???????????????margin-bottom:?0;?????????
???????????????width:?100%;??????????
???????}?????
????.nav?a{?????text-decoration:?none;?????}?????
????.nav?li{??????
????????????height:?20%;????
????????????border-top:?1px?solid?#D8D1D1;????
????????????border-left:?1px?solid?#D8D1D1;????
????????????border-right:?1px?solid?#D8D1D1;????
????????????border-bottom:?2px?solid?red;????
????????????/*table-cell去掉了前面的點以及把三個摞起來的li給整到一行*/????
????????????display:?table-cell;????
????????????text-align:?center;????
????????????vertical-align:?middle;????
????????????border-radius:?3px;
????????}??????????
????.col-md-4{?????width:20%;??}????????
????.nav-content-control{????????
???????????????height:?80%;????????
???????????????line-height:?40px;????????
???????????????border-right:?1px?solid?#837F7F;????????
???????????????border-left:?1px?solid?#837F7F;????????
???????????????border-bottom:?1px?solid?#837F7F;????????
????????????????border-radius:?5px;????????
??????????????????????}????????
????.nav-content?{????????
??????????????padding:?0px?75px;????????
??????????????height:?100%;????????????????
??????????????display:?none;????????
?????????????}????
</style>
<script?type="text/javascript">?????
????window.onload=function(){??????
????????document.getElementById("content-one").style.display="block";??????
????????document.getElementById('one').setAttribute('style','border-top:2px?solid?red;border-bottom:0');?????
????????}????
?????//?JS實現選項卡切換
?????function?active(obj)?{
?????????obj.setAttribute('style','background-color:#ddd;color:red;border-top:2px?solid?red;border-bottom:0;');
?????????
?????????for(const?e?of?['one','two','three']){
?????????????if(e==obj.id){
?????????????????document.getElementById('content-'+e).style.display='block';
??????????????}else?if(e!=obj.id)?{
????????????????????document.getElementById(e).removeAttribute('style');
????????????????????document.getElementById('content-'+e).style.display='none';
????????????????????}
?????????}
?????}
?</script>?
?</head>
?<body>
????<div?class="label-all">
????????<ul?class="nav">
????????<li?class="nav-title?col-md-4"?id="one"?onclick="active(this)"><a?href="javascript:void(0);">房產</a></li>
????????<li?class="nav-title?col-md-4"?id="two"?onclick="active(this)"><a?href="javascript:void(0);">家居</a></li>
????????<li?class="nav-title?col-md-4"?id="three"?onclick="active(this)"><a?href="javascript:void(0);">二手房</a></li>
??????</ul>
????????<div?class="nav-content-control">
????????????<div?class="nav-content"?id="content-one">????
????????????????275萬購昌平鄰鐵三居?總價20萬買一居????
????????????????200萬內購五環三居?140萬安家東三環????
????????????????北京首現零首付樓盤?53萬購東5環50平????
????????????????京樓盤直降5000?中信府?公園樓王現房
????????????</div>
????????????<div?class="nav-content"?id="content-two">
????????????????40平出租屋大改造?美少女的混搭小窩?????
????????????????經典清新簡歐愛家?90平老房煥發新生?????
????????????????新中式的酷色溫情?66平撞色活潑家居?????
????????????????瓷磚就像選好老婆?衛生間煙道的設計
????????????</div>
????????????<div?class="nav-content"?id="content-three"?>?????
????????????????通州豪華3居260萬?二環稀缺2居250w甩?????
????????????????西3環通透2居290萬?130萬2居限量搶購?????
????????????????黃城根小學學區僅260萬?121平70萬拋!?????
????????????????獨家別墅280萬?蘇州橋2居優惠價248萬
????????????</div>
????????</div>
???</div>
</body>
</html>