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

太久沒寫了，忘記了，還看了下以前的，寫出來的

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/
????????*?{
????????????margin:0;
????????????padding:0;
????????}
????????body?{
????????????font-size:14px;
????????????line-height:1.5;
????????}
????????div?{
????????????clear:both;
????????}
????????ul?{
????????????overflow:hidden;
????????}
????????ul?li{
????????????list-style:none;
????????}
????????a?{
????????????color:#000;
????????????font-size:12px;
????????????text-decoration:none;
????????????padding-bottom:2px?#fff?solid;
????????}
????????a:hover,.active>a?{
????????????color:red;
????????????text-decoration:underline;
????????}
????????div?{
????????????display:none;
????????????width:300px;
????????}
????????div.current?{
????????????display:block;
????????}
????????#nav?li?{
????????????float:left;
????????}
????????#nav?li?a?{
????????????display:block;
????????????padding:5px;
????????????margin-right:5px;
????????????border:1px?#ccc?solid;
????????}
????????.item?{
????????????border:1px?#000?solid;
????????}

????</style>
????<script?type="text/javascript">
????//?JS實現選項卡切換
????????window.onload?=?function()?{
????????????var?oUl?=?document.getElementById('nav');
????????????var?aLi?=?oUl.getElementsByTagName('li');
????????????var?aDiv?=?document.getElementsByTagName('div');

????????????for(var?i=0;?i<aLi.length;?i++)?{
????????????????aLi[i].index?=?i;
????????????????aLi[i].onclick?=?function()?{
????????????????????for(var?i=0;?i<aLi.length;?i++)?{
????????????????????????if(aLi[i].className?==?'active')?{
????????????????????????????aLi[i].className?=?'';
????????????????????????????aDiv[i].style.display?=?'none';
????????????????????????}
????????????????????????this.className?=?'active';
????????????????????????aDiv[this.index].style.display?=?'block';
????????????????????}
????????????????}
????????????}
????????}

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

</body>
</html>