距今學(xué)習(xí)前端已經(jīng)有一個(gè)多月了掏缎，大概六月上旬開(kāi)始看視頻教程和做練習(xí)，直到現(xiàn)在剛做完JS進(jìn)階（其實(shí)是入門）的最后一道習(xí)題煤杀。其中也遇到很多問(wèn)題眷蜈，孤軍奮戰(zhàn)只能通過(guò)谷歌百度解決學(xué)習(xí)過(guò)程中的疑團(tuán)。
最后一道編程習(xí)題是編寫一個(gè)選項(xiàng)卡沈自，對(duì)于外語(yǔ)專業(yè)的我來(lái)說(shuō)也是目前碰到最難的練習(xí)（請(qǐng)?jiān)彌](méi)有任何計(jì)算機(jī)基礎(chǔ)的學(xué)渣）酌儒，寫完CSS到了JS部分就傻了，通過(guò)查看別人的代碼也是一頭霧水枯途。其中最不好理解的就是忌怎；1. 函數(shù)進(jìn)行了二次循環(huán)籍滴；2. 數(shù)組本來(lái)就有下標(biāo)，為何還需定義下標(biāo)榴啸；3. this的引用如何理解孽惰。
以下是我自己（學(xué)渣）學(xué)習(xí)之后的理解，可能有不對(duì)的地方鸥印，歡迎指正勋功。
- 二次循環(huán)：每次循環(huán)的目的不一樣，具體看代碼注釋辅甥。
- 定義數(shù)組下標(biāo)：第一次循環(huán)完成之后酝润，最后一個(gè) i 的值是length-1，所以當(dāng)我們后期需要調(diào)用每一個(gè)下標(biāo)的時(shí)候璃弄，需要先對(duì)其進(jìn)行定義要销，否則只會(huì)調(diào)用length-1的值。
- this的引用：this的用法有很多夏块，總的來(lái)說(shuō)this指代的就是引用函數(shù)的對(duì)象疏咐，而在這里this指的就是被點(diǎn)擊的DOM對(duì)象，即getLis[i]脐供。
附上代碼：
CSS:
<style type="text/css">
/* CSS樣式制作 */
*{margin:0;padding: 0;}
.container{padding: 20px;}
.ul{width: 250px;height: 38px;}
li{float: left;list-style: none;line-height: 35px;border-width: 1px 1px 0 1px;border-style:solid;margin-left: 15px;padding-left: 10px;padding-right: 10px;cursor: pointer;}
.main{width: 280px;height:120px;padding:5px;border-width: 3px 1px 1px 1px;border-style: solid;border-color: orange blue blue blue;}
.textHidden{display: none;}
.textShowed{display: block;}
.choice{border-top:solid 3px orange;border-bottom: solid 4px white;}
</style>
JS:
<script type="text/javascript">
// JS實(shí)現(xiàn)選項(xiàng)卡切換
window.onload=function () {
var getLis=document.getElementsByTagName("li");
var getP=document.getElementsByTagName("p");
for(var i=0;i<getLis.length;i++){ //第一次遍歷：
getLis[i].index=i; //1.為每個(gè)getLis[i]定義索引浑塞，以便遍歷之后能夠返回調(diào)用。
getLis[i].onclick=function(){ //2.綁定點(diǎn)擊每個(gè)getLis[i]事件之后觸發(fā)的函數(shù)政己。
for(var i=0;i<getLis.length;i++){ //點(diǎn)擊某個(gè)getLis[i]之后酌壕，在觸發(fā)的函數(shù)里進(jìn)行二次遍歷，開(kāi)始設(shè)置樣式：
getLis[i].className=" "; //1.首先還原導(dǎo)航表的樣式歇由，即設(shè)置類名為空卵牍。
getP[i].className="textHidden"; //2.然后設(shè)置文本類名，隱藏所有的文本內(nèi)容沦泌。
}
this.className="choice"; //二次循環(huán)結(jié)束后糊昙，也就是觸發(fā)的函數(shù)最后，對(duì)this（被點(diǎn)擊的getLis[i]）進(jìn)行樣式設(shè)置谢谦，這里是改變類名释牺，自動(dòng)獲取CSS的樣式。
getP[this.index].className="textShowed"; //然后改變需要顯示的文本的類名（由于顯示的文本與被點(diǎn)擊的getLis[i]的索引是一樣的回挽，所以這里調(diào)用了點(diǎn)擊的getLis[i]的索引没咙，傳給getP使用），獲取顯示屬性厅各。
}
}
}
</script>
HTML:
<body>
<!-- HTML頁(yè)面布局 -->
<div class="container">
<div class="ul">
<ul>
<li>房產(chǎn)</li>
<li>家居</li>
<li>二手房</li>
</ul>
</div>
<div class="main">
<p class="textShowed">275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買一居</br>200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</br>北京首現(xiàn)零首付樓盤 53萬(wàn)購(gòu)東5環(huán)50平</br>京樓盤直降5000 中信府 公園樓王現(xiàn)房</p>
<p class="textHidden"> 40平出租屋大改造 美少女的混搭小窩</br>經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生</br>新中式的酷色溫情 66平撞色活潑家居</br>瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)</p>
<p class="textHidden">通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩</br> 西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)</br>黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!</br>獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</p>
</div>
</div>
</body>
