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

幫看一下怎么實現不了？

<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */??
? ? ?*{font-size:10px;
? ? ? ?margin:0;
? ? ? ?padding:0;
? ? ? ?font-family:"微軟雅黑";
? ? ? ?color:black;
? ? ?}
? ? ?ul{list-style-type:none;}
? ? ?a{text-decoration:none;}
? ? ?
? ? ?#main{
? ? ? ? ?width:275px;
? ? ? ? ?height:300px;
? ? ? ? ?margin:20px auto;
? ? ?}
? ? ?#title{
? ? ? ? ?border-bottom:2px solid red;
? ? ? ? ?height:32px;
? ? ?}
? ? ?#title li{
? ? ? ? ?line-height:32px;
? ? ? ? ?display:inline-block;
? ? ? ? ?border:1px solid blue;
? ? ? ? ?border-bottom:none;
? ? ? ? ?margin-left:20px;
? ? ? ? ?width:60px;
? ? ? ? ?text-align:center;
? ? ?}
? ? ?#title li:hover{cursor:pointer;}
? ? ?
? ? ?#title .active{
? ? ? ? ?border-top:2px solid red;
? ? ? ? ?border-bottom:2px solid #FFFFFF;//這個屬性是
? ? ?}
? ? ?
? ? ?#main div{
? ? ? ? ?border:1px solid blue;
? ? ? ? ?border-top:none;
? ? ?}
? ? ?#main 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 ul1 = document.getElementById("title");
? ? ? ? var aLi = ul1.getElementsByTagName("li");//獲取tietle里的li
? ? ? ? var oDiv = document.getElementById("main");
? ? ? ? var aDiv = oDiv.getElementsByTagName("div");
? ? ? ? for(var i = 0;i<aLi.length;i++){
? ? ? ? ? ? aLi[i].index=i;
? ? ? ? ? ? aLi[i].onmouseover=function(){
? ? ? ? ? ? ? ? for(var j=0;j<aLi.length;i++){
? ? ? ? ? ? ? ? ali[j].className="" //清空li的classname
? ? ? ? ? ? }
? ? ? ? ? ? this.className="active";
? ? ? ? ? ? for(var n = 0;n<aDiv.length;i++){//循環次數為aDiv的長度
? ? ? ? ? ? ? ? aDiv[n].className="hide";
? ? ? ? ? ? }
? ? ? ? ? ? aDiv[this.index].className="show";
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ??
? ? </script>
?
</head>
<body>

<div id="main">
? ? <ul id="title">
? ? ? ? <li class="active">房產</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:;" >200萬內購五環三居 140萬安家東三環</a></li>
? ? ? ? <li><a href="javascript:;" >200萬內購五環三居 140萬安家東三環</a></li>
? ? ? ? <li><a href="javascript:;" >200萬內購五環三居 140萬安家東三環</a></li>
? ? </ul>
? ? </div>
? ??
? ? <div class="hide">
? ? ? ? ? ? <ul>
? ? ? ? <li><a href="javascript:;" >275萬購昌平鄰鐵三居總價20萬買一居</a></li>
? ? ? ? <li><a href="javascript:;" >200萬內購五環三居 140萬安家東三環</a></li>
? ? ? ? <li><a href="javascript:;" >200萬內購五環三居 140萬安家東三環</a></li>
? ? </ul>
? ? </div>
? ?
</div>
?
</body>
</html>