對(duì)內(nèi)容切換的函數(shù)實(shí)現(xiàn)過程不理解。虛心求解答，謝謝！
<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>實(shí)踐題 - 選項(xiàng)卡</title>
??? <style type="text/css">
?? ?*{padding:0px;margin:0px;font:12px normal "microsoft yahei";}
??? #tabs {margin: 20px;padding: 5px;height: 150px;width: 290px;}
??? #tabs ul{line-height: 30px;display: block;height: 30px;border-bottom: 2px saddlebrown solid;list-style: none;}
??? #tabs ul li {line-height: 28px;background: #fff;text-align: center;display: inline-block;float: left;height: 28px;width: 60px;margin: 0px 3px;border:1px solid #aaa;border-bottom: none;list-style: none;cursor: pointer;}
??? #tabs ul li.on {border-top: 2px solid saddlebrown;border-bottom: 2px solid #fff;}
??? #tabs div {line-height: 25px;height: 120px;border:1px solid #336699;border-top:none;padding:5px;}
??? .hide {display: none;}
??? </style>
??? <script type="text/javascript">
?????? window.onload=function(){
??????? var oTab=document.getElementById("tabs");
??????? var oUl=oTab.getElementsByTagName("ul")[0];
??????? var oLis=oUl.getElementsByTagName("li");
??????? var oDivs=oTab.getElementsByTagName("div");
??????? for(var i=0,len=oLis.length;i<len;i++){
??????????? oLis[i].index=i;
??????????? oLis[i].onclick=function(){
??????????????? for(var n=0;n<len;n++){
??????????????????? oLis[n].className="";
??????????????????? oDivs[n].className="hide";//當(dāng)點(diǎn)擊每個(gè)<li>時(shí)，所有<li>元素的類名為空，<div>元素的類名為隱藏，
??????????????? }
??????????? this.className="on";//這個(gè)地方理解為：點(diǎn)擊某個(gè)<li>，就將"on"賦給這個(gè)<li>,然后調(diào)用類名為"on"的標(biāo)簽，頁面布局中只有第一個(gè)<li>的class為"on"?????
?????????? oDivs[this.index].className="";//賦值""是沒有class屬性的意思還是別的意思。承上，當(dāng)前對(duì)象調(diào)用無類名的<div>標(biāo)簽。當(dāng)i=0時(shí)，oLis[0].className="on"，oDivs[0]無類名；當(dāng)i=1時(shí)，oLis[1]沒有類名，但this.className="on"，所以又去調(diào)用oLis[0]的內(nèi)容嗎？同樣oDivs[1].className=""和第二個(gè)div標(biāo)簽<div class="hide">之間是怎么聯(lián)系的?？傊畬?duì)內(nèi)容切換的實(shí)現(xiàn)過程不理解。 ???
??????????? }
??????? };
??? }
?? ?
??? </script>
?
</head>
<body>
<!-- HTML頁面布局 -->
<div id="tabs">
??? <ul>
??????? <li class="on">房產(chǎn)</li>//只有第一個(gè)<li>的class為"on"
??????? <li>家居</li>
??????? <li>二手房</li>
??? </ul>
??? <div>//第一個(gè)<div>無class屬性
???? 275萬購昌平鄰鐵三居 總價(jià)20萬買一居<br>
??? 200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)<br>
??? 北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平<br>
??? 京樓盤直降5000 中信府 公園樓王現(xiàn)房<br>
??? </div>
??? <div class="hide">//第二第三個(gè)<div>均為隱藏屬性
???? 40平出租屋大改造 美少女的混搭小窩<br>
??? 經(jīng)典清新簡(jiǎn)歐愛家 90平老房煥發(fā)新生<br>
??? 新中式的酷色溫情 66平撞色活潑家居<br>
??? 瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)<br>
??? </div>
??? <div class="hide">
???? 通州豪華3居260萬 二環(huán)稀缺2居250w甩<br>
??? 西3環(huán)通透2居290萬 130萬2居限量搶購<br>
??? 黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!<br>
??? 獨(dú)家別墅280萬 蘇州橋2居優(yōu)惠價(jià)248萬<br>
??? </div>
</div>
</body>
</html>
2017-07-27
對(duì)內(nèi)容切換不理解啊，我先簡(jiǎn)單的講一下思路
首先是頁面的初始化，最開始的時(shí)候第一個(gè)LI標(biāo)簽需要添加on樣式，顯示第一個(gè)div（即不給它添加hide樣式，使其樣式為空），其它div添加hide樣式讓其隱藏，其它LI不添加on樣式讓其處于未點(diǎn)擊狀態(tài)
我把你不懂的那塊代碼標(biāo)注了下，你看看
????????for(var?i=0,len=oLis.length;i<len;i++){//通過循環(huán)為所有的LI綁定點(diǎn)擊事件 ????????????oLis[i].index=i;//添加index屬性，方便后期找到當(dāng)前點(diǎn)擊LI對(duì)應(yīng)的DIV，為其去除hide樣式，即將其className賦值為空 ????????????oLis[i].onclick=function(){//循換綁定點(diǎn)擊事件 ????????????????for(var?n=0;n<len;n++){//通過循環(huán)將所有的li的className賦值為空，即所有的LI皆是未點(diǎn)擊的樣式，所有的DIV的className為hide樣式，即所有DIV都隱藏 ????????????????????oLis[n].className=""; ????????????????????oDivs[n].className="hide"; ????????????????} ????????????this.className="on";???//通過this獲取到當(dāng)前點(diǎn)擊的LI，將其className賦值為on，即讓當(dāng)前點(diǎn)擊的LI顯示其應(yīng)有的點(diǎn)擊樣式 ???????????oDivs[this.index].className="";?//通過循環(huán)體內(nèi)第一條語句存儲(chǔ)的index值，找到當(dāng)前點(diǎn)擊LI對(duì)應(yīng)的DIV，去除原有的hide樣式，讓其顯示 ????????????} ????????};2017-08-02
腳本代碼只處理“房產(chǎn)”、“家居”、“二手房”，三個(gè)選項(xiàng)。每點(diǎn)擊一個(gè)選項(xiàng)，代碼就為每個(gè)選項(xiàng)設(shè)置CSS樣式，過程是：先獲取當(dāng)前選項(xiàng)序號(hào)，再對(duì)每個(gè)選項(xiàng)添加css樣式以及DIV（div的添加來自之前記錄的序號(hào)）。
2017-07-25
你這沒理解ｔｈｉｓ指的是哪個(gè)對(duì)象。這里ｔｈｉｓ是當(dāng)你點(diǎn)擊哪個(gè)ｌｉ的時(shí)候他就指向哪個(gè)ｌｉ。點(diǎn)擊第一個(gè)ｌｉ(i = 0時(shí))，首先全部ｌｉ的類名都為空，然后第一個(gè)ｌｉ添加一個(gè)類名＂ｏｎ＂，點(diǎn)第二個(gè)li(i = 1時(shí))也是讓類名為空，然后再給第二個(gè)li添加類名“ｏｎ”。第三個(gè)同理。其實(shí)第二句話也是這么個(gè)意思，先讓所有div添加類名“hide”隱藏起來，然后點(diǎn)擊li時(shí)，讓該類名為空，使div不再隱藏。就是這么個(gè)意思
2017-07-25
<!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<title>實(shí)踐題?-?選項(xiàng)卡</title> ????<style?type="text/css"> ????*{padding:0px;margin:0px;font:12px?normal?"microsoft?yahei";} ????#tabs?{margin:?20px;padding:?5px;height:?150px;width:?290px;} ????#tabs?ul{line-height:?30px;display:?block;height:?30px;border-bottom:?2px?saddlebrown?solid;list-style:?none;} ????#tabs?ul?li?{line-height:?28px;background:?#fff;text-align:?center;display:?inline-block;float:?left;height:?28px;width:?60px;margin:?0px?3px;border:1px?solid?#aaa;border-bottom:?none;list-style:?none;cursor:?pointer;} ????#tabs?ul?li.on?{border-top:?2px?solid?saddlebrown;border-bottom:?2px?solid?#fff;} ????#tabs?div?{line-height:?25px;height:?120px;border:1px?solid?#336699;border-top:none;padding:5px;} ????.hide?{display:?none;} ????</style> ????<script?type="text/javascript"> ???????window.onload=function(){ ????????var?oTab=document.getElementById("tabs"); ????????var?oUl=oTab.getElementsByTagName("ul")[0]; ????????var?oLis=oUl.getElementsByTagName("li"); ????????var?oDivs=oTab.getElementsByTagName("div"); ????????for(var?i=0,len=oLis.length;i<len;i++){ ????????????oLis[i].index=i; ????????????oLis[i].onclick=function(){ ????????????????for(var?n=0;n<len;n++){ ????????????????????oLis[n].className=""; ????????????????????oDivs[n].className="hide"; ????????????????} ????????????this.className="on"; ????????????oDivs[this.index].className=""; ????????????} ????????}; ????} ???? ????</script> ? </head> <body> <!--?HTML頁面布局?--> <div?id="tabs"> ????<ul> ????????<li>房產(chǎn)</li> ????????<li>家居</li> ????????<li>二手房</li> ????</ul> ????<div> ?????275萬購昌平鄰鐵三居?總價(jià)20萬買一居<br> ????200萬內(nèi)購五環(huán)三居?140萬安家東三環(huán)<br> ????北京首現(xiàn)零首付樓盤?53萬購東5環(huán)50平<br> ????京樓盤直降5000?中信府?公園樓王現(xiàn)房<br> ????</div> ????<div> ?????40平出租屋大改造?美少女的混搭小窩<br> ????經(jīng)典清新簡(jiǎn)歐愛家?90平老房煥發(fā)新生<br> ????新中式的酷色溫情?66平撞色活潑家居<br> ????瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)<br> ????</div> ????<div> ?????通州豪華3居260萬?二環(huán)稀缺2居250w甩<br> ????西3環(huán)通透2居290萬?130萬2居限量搶購<br> ????黃城根小學(xué)學(xué)區(qū)僅260萬?121平70萬拋!<br> ????獨(dú)家別墅280萬?蘇州橋2居優(yōu)惠價(jià)248萬<br> ????</div> </div> </body> </html>2017-07-25
看的太費(fèi)勁了，你最好把整個(gè)代碼貼出來，包括HTML JS CSS