<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/??
????????*{margin:0;padding:0;font:normal?14px?"微軟雅黑";color:black;}
????????ul{list-style-type:none;}
????????a{text-decoration:none;}
????????#content{
????????????width:300px;
????????????height:200px;
????????????margin:20px?auto;???
????????}
????????#list{
????????????border-bottom:2px?solid?red;
????????????height:32px;
????????}
????????#list?li{
????????????display:inline-block;
????????????width:60px;
????????????line-height:30px;
????????????text-align:center;
????????????border:1px?solid?#999;
????????????border-bottom:none;
????????????margin-left:5px;??
????????}
????????#list?li:hover{
????????????cursor:pointer;
????????}
????????#list?li.active{
????????????border-top:2px?solid?red;
????????????border-bottom:2px?solid?#FFFFFF;
????????}
????????#content?div{
????????????border:1px?solid?#7396BB;
????????????border-top:none;
????????}
????????#content?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?oList?=?document.getElementById("list");
????????var?aLi?=?oList.getElementsByTagName("li");
????????var?oDiv?=?document.getElementById("content");
????????var?aDiv?=?oDiv.getElementsByTagName("div");
????????for(var?i=0;i<aLi.length;i++)
????????{
????????????aLi[i].index?=?i;
????????????//方法一：鼠標移動觸發事件第一種方法：
????????????
????????????aLi[i].onmouseover?=?function()
????????????{
????????????????for(var?i=0;i<aLi.length;i++)
????????????????{
????????????????????aLi[i].className?=?"";
????????????????}
????????????????this.className?=?"active";
????????????????for(var?j=0;j<aDiv.length;j++)
????????????????{
???????????????????aDiv[j].className?=?"hide";?
????????????????}
????????????????aDiv[this.index].className?=?"show";
????????????}
????????????
????????????//方法二：鼠標觸發事件第二種方法：
????????????/*
????????????aLi[i].onmouseover?=?function()
????????????{
????????????????for(var?i=0;i<aLi.length;i++)
????????????????{
????????????????????aLi[i].className?=?"";
????????????????????aDiv[i].className?=?"hide";
????????????????}
????????????????this.className?=?"active";
????????????????aDiv[this.index].className?=?"show";
????????????}
????????????*/
????????????//方法三：鼠標點擊觸發事件
????????????/*aLi[i].onclick?=?function()
????????????{
????????????????for(var?i=0;i<aLi.length;i++)
????????????????{
????????????????????aLi[i].className?=?"";
????????????????????aDiv[i].className?=?"hide";
????????????????}
????????????????this.className?=?"active";
????????????????aDiv[this.index].className?=?"";
????????????}*/
????????}
????}
????</script>
</head>
<body>
<!--?HTML頁面布局?-->
????<div?id="content">
????????<ul?id="list">
????????????<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>
2016-09-10
因為他們的值都是三，循環的次數都是三次，方法二中的aDiv[i].className?=?"hide";放在方法一的第一個for循環的范圍里（for(var?i=0;i<aLi.length;i++)）或者（for(var?j=0;j<aDiv.length;j++）的范圍里都是同樣的，因為他們的循環次數都為三次，序號也是相同的，放在哪一個都是可以實現的，主要是他們for循環的i值，0,1,2這樣子。
2016-09-08
主要是想知道：方法一中，那個for循環的范圍是分，for(var?i=0;i<aLi.length;i++)和for(var?j=0;j<aDiv.length;j++)，而方法二中for循環的范圍為：for(var?i=0;i<aLi.length;i++)，然而，為什么當方法二中的aDiv[i].className?=?"hide";放在方法一的第一個for循環的范圍里（for(var?i=0;i<aLi.length;i++)），而不是（for(var?j=0;j<aDiv.length;j++）的范圍里卻依然可以實現啊？