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

頭已炸~太難了，誰來幫幫我！

我有兩個問題：

????1.選項卡之間不能切換；

????2.標題與列表之間的空白怎么實現？

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/??
????????*{margin:0;padding:0;font:normal?16px?"微軟雅黑";color:#000;}
????????ul{list-style-type:none;}
????????a{text-decoration:none;}
????????
????????#tab-list{width:288px;height:190px;margin:20px?auto;}
????????
????????#ul1{border-bottom:2px?solid?red;margin:0px?auto;}
????????#ul1?li{display:inline-block;width:90px;line-height:30px;text-align:center;border:1px?solid?#999;}
????????#ul1?li:hover{cursor:pointer;color:red;}
????????#ul1?li.active{border-top:2px?solid?#8b4513;border-bottom:2px?solid?#fff;}?
????????
????????#tab-list?div{border:1px?solid?#7396B8;border-top:none;}
????????#tab-list?div?li{height:30px;line-height:30px;text-indent:8px;?}
????????
????????.show{display:block;}
????????.hide{display:none;}
????</style>
????<script?type="text/javascript">
????//?JS實現選項卡切換
????window.onload=function(){
????????var?aul1=document.getElementById('ul1');
????????var?nli=nul1.getElementsByTagName('li');
????????var?adiv=document.getElementById('tab-list');
????????var?ndiv=adiv.getElementsByTagName('div');
????????for(var?i=0;i<nli.length;i++){
????????????nli[i].index=i;
????????????nli[i].onmouseover=function(){
????????????????for(var?i=0;i<nli.length;i++){
????????????????????nli[i].className="";
????????????????}
????????????????this.className='active';
????????????????
????????????????for(var?j=0;j<ndiv.length;j++){
????????????????????ndiv[j].className='hide';
????????????????}
????????????????ndiv[this.index].className='show';
????????????}
????????}
????}
????</script>
</head>
<body>
<!--?HTML頁面布局?-->
<div?id="tab-list">
????<ul?id="ul1">
????????<li>房產</li>
????????<li>家居</li>
????????<li>二手房</li>
????</ul>
????<div>
????????<ul>
????????????<li><a?href="javascript:;">275萬購昌平鄰鐵三居?總價20萬買一居</a></li>
????????????<li><a?href="javascript:;">200萬內購五環三居?140萬安家東三環</a></li>
????????????<li><a?href="javascript:;">北京首現零首付樓盤?53萬購東5環50平</a></li>
????????????<li><a?href="javascript:;">京樓盤直降5000?中信府?公園樓王現房</a></li>
????????</ul>
????</div>????
????<div>
????????<ul>
????????????<li><a?href="javascript:;">40平出租屋大改造?美少女的混搭小窩</a></li>
????????????<li><a?href="javascript:;">經典清新簡歐愛家?90平老房煥發新生</a></li>
????????????<li><a?href="javascript:;">新中式的酷色溫情?66平撞色活潑家居</a></li>
????????????<li><a?href="javascript:;">瓷磚就像選好老婆?衛生間煙道的設計</a></li>
????????</ul>
????</div>????
????<div>
????????<ul>
????????????<li><a?href="javascript:;">通州豪華3居260萬?二環稀缺2居250w</a></li>
????????????<li><a?href="javascript:;">西3環通透2居290萬?130萬2居限量搶</a></li>
????????????<li><a?href="javascript:;">黃城根小學學區僅260萬?121平70萬拋</a></li>
????????????<li><a?href="javascript:;">獨家別墅280萬?蘇州橋2居優惠價248</a></li>
????????</ul>
????</div>
</div>

?
</body>
</html>