<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實(shí)踐題?-?選項(xiàng)卡</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實(shí)現(xiàn)選項(xiàng)卡切換
????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;
????????????//方法一：鼠標(biāo)移動(dòng)觸發(fā)事件第一種方法：
????????????
????????????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";
????????????}
????????????
????????????//方法二：鼠標(biāo)觸發(fā)事件第二種方法：
????????????/*
????????????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";
????????????}
????????????*/
????????????//方法三：鼠標(biāo)點(diǎn)擊觸發(fā)事件
????????????/*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頁(yè)面布局?-->
????<div?id="content">
????????<ul?id="list">
????????????<li>房產(chǎn)</li>
????????????<li>家居</li>
????????????<li>二手房</li>
????????</ul>
????????<div>
????????????<ul>
????????????????<li><a?href="javascript:;">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買(mǎi)一居</a></li>
????????????????<li><a?href="javascript:;">200萬(wàn)內(nèi)購(gòu)五環(huán)三居?140萬(wàn)安家東三環(huán)</a></li>
????????????????<li><a?href="javascript:;">北京首現(xiàn)零首付樓盤(pán)?53萬(wàn)購(gòu)東5環(huán)50平</a></li>
????????????????<li><a?href="javascript:;">京樓盤(pán)直降5000?中信府?公園樓王現(xiàn)房</a></li>
????????????</ul>
????????</div>
????????<div>
????????????<ul>
????????????????<li><a?href="javascript:;">40平出租屋大改造?美少女的混搭小窩</a></li>
????????????????<li><a?href="javascript:;">經(jīng)典清新簡(jiǎn)歐愛(ài)家?90平老房煥發(fā)新生</a></li>
????????????????<li><a?href="javascript:;">新中式的酷色溫情?66平撞色活潑家居</a></li>
????????????????<li><a?href="javascript:;">瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)</a></li>
????????????</ul>
????????</div>
????????<div>
????????????<ul>
????????????????<li><a?href="javascript:;">通州豪華3居260萬(wàn)?二環(huán)稀缺2居250w甩</a></li>
????????????????<li><a?href="javascript:;">西3環(huán)通透2居290萬(wàn)?130萬(wàn)2居限量搶購(gòu)</a></li>
????????????????<li><a?href="javascript:;">黃城根小學(xué)學(xué)區(qū)僅260萬(wàn)?121平70萬(wàn)拋!</a></li>
????????????????<li><a?href="javascript:;">獨(dú)家別墅280萬(wàn)?蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</a></li>
????????????</ul>
????????</div>
????</div>
?
</body>
</html>
2016-09-10
因?yàn)樗麄兊闹刀际侨?，循環(huán)的次數(shù)都是三次，方法二中的aDiv[i].className?=?"hide";放在方法一的第一個(gè)for循環(huán)的范圍里（for(var?i=0;i<aLi.length;i++)）或者（for(var?j=0;j<aDiv.length;j++）的范圍里都是同樣的，因?yàn)樗麄兊难h(huán)次數(shù)都為三次，序號(hào)也是相同的，放在哪一個(gè)都是可以實(shí)現(xiàn)的，主要是他們for循環(huán)的i值，0,1,2這樣子。
2016-09-08
主要是想知道：方法一中，那個(gè)for循環(huán)的范圍是分，for(var?i=0;i<aLi.length;i++)和for(var?j=0;j<aDiv.length;j++)，而方法二中for循環(huán)的范圍為：for(var?i=0;i<aLi.length;i++)，然而，為什么當(dāng)方法二中的aDiv[i].className?=?"hide";放在方法一的第一個(gè)for循環(huán)的范圍里（for(var?i=0;i<aLi.length;i++)），而不是（for(var?j=0;j<aDiv.length;j++）的范圍里卻依然可以實(shí)現(xiàn)??？