                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /Tab選項卡切換效果

為啥我寫了之后瀏覽器崩潰了

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>table切換</title>
????<style?type="text/css">
????????*{
????????????margin:?0;
????????????padding:?0;
????????????list-style:?none;
????????????font-size:?14px;
????????????text-decoration:?none;
????????}
????????a{color:?#000}
????????#box{
????????????width:?500px;
????????????border:?1px?solid?#666;
????????????margin:?20px?auto;
????????????height:?500px;
????????}
????????.title{
????????????height:?30px;
????????????background:?#7e7e7e;
????????????position:?relative;
????????}
????????.title?ul{
????????????overflow:?hidden;
????????????position:?absolute;
????????????width:?500px;
????????????background:?#fff
????????}
????????.title?ul?li{
????????????float:?left;
????????????background:?#eee;
????????????width:?122px;
????????????padding:?0?2px;
????????}
????????.title?ul?li?a{
????????????display:?block;
????????????line-height:?30px;
????????????text-align:?center;
????????????padding:?0?2px;
????????????border-left-color:#666;
????????????border-right-color:?#666;
????????????border-bottom-color:?#fff
????????}
????????.title?ul?li?a:hover{
????????????color:?#999
????????}
????????.title?ul?.active{
????????????background:?#fff;
????????????padding:?0;
????????}
????</style>
</head>
<body>
????<div?id="box">
????????<div?id="top">
????????????<ul>
????????????????<li><a?href="javascript:">切換一</a></li>
????????????????<li><a?href="javascript:">切換二</a></li>
????????????????<li><a?href="javascript:">切換三</a></li>
????????????????<li><a?href="javascript:">切換四</a></li>
????????????</ul>
????????</div>
????????<div?id="box2">
????????????<div>
????????????????<ul>
????????????????????<li>
????????????????????????<a?href="#">測試文章測試文章</a>
????????????????????</li>
????????????????????<li>
????????????????????????<a?href="#">測試文章測試文章</a>
????????????????????</li>
????????????????????<li>
????????????????????????<a?href="#">測試文章測試文章</a>
????????????????????</li>
????????????????????<li>
????????????????????????<a?href="#">測試文章測試文章</a>
????????????????????</li>
????????????????</ul>
????????????</div>
????????????<div>
????????????????<ul>
????????????????????<li>
????????????????????????<a?href="#">測試文章測試文章</a>
????????????????????</li>
????????????????????<li>
????????????????????????<a?href="#">測試文章測試文章</a>
????????????????????</li>
????????????????????<li>
????????????????????????<a?href="#">測試文章測試文章</a>
????????????????????</li>
????????????????????<li>
????????????????????????<a?href="#">測試文章測試文章</a>
????????????????????</li>
????????????????</ul>
????????????</div>
????????????<div>
????????????????<ul>
????????????????????<li>
????????????????????????<a?href="#">測試文章測試文章</a>
????????????????????</li>
????????????????????<li>
????????????????????????<a?href="#">測試文章測試文章</a>
????????????????????</li>
????????????????????<li>
????????????????????????<a?href="#">測試文章測試文章</a>
????????????????????</li>
????????????????????<li>
????????????????????????<a?href="#">測試文章測試文章</a>
????????????????????</li>
????????????????</ul>
????????????</div>
????????????<div>
????????????????<ul>
????????????????????<li>
????????????????????????<a?href="#">測試文章測試文章</a>
????????????????????</li>
????????????????????<li>
????????????????????????<a?href="#">測試文章測試文章</a>
????????????????????</li>
????????????????????<li>
????????????????????????<a?href="#">測試文章測試文章</a>
????????????????????</li>
????????????????????<li>
????????????????????????<a?href="#">測試文章測試文章</a>
????????????????????</li>
????????????????</ul>
????????????</div>
????????</div>
????</div>
????<script?type="text/javascript">
????????function?Id(id){
????????????return?typeof?id?===?'string'?document.getElementById(id):id;
????????}
????????window.onload?=function(){
????????????var?titles?=?Id("top").getElementsByTagName("li"),
????????????divs?=?Id("box2").getElementsByTagName("div");
????????????
????????????if(titles.length!=divs.length){
????????????????return;
????????????}
????????????for(var?i=0;i<titles.length;i++){
????????????????titles[i].id?=i;
????????????????titles[i].onmouseover=function(){
????????????????????for(var?j?=0;j<titles.length;i++){
????????????????????????titles[j].className=""
????????????????????}
????????????????????????this.className="active";
????????????????}
????????????}
????????}
????</script>
</body>
</html>

加上這一句之后就蹦了。跟老師寫的一樣啊
for(var?j?=0;j<titles.length;i++){
????????????????????????titles[j].className=""
????????????????????}