距今學習前端已經有一個多月了，大概六月上旬開始看視頻教程和做練習，直到現在剛做完JS進階（其實是入門）的最后一道習題。其中也遇到很多問題，孤軍奮戰只能通過谷歌百度解決學習過程中的疑團。
最后一道編程習題是編寫一個選項卡，對于外語專業的我來說也是目前碰到最難的練習（請原諒沒有任何計算機基礎的學渣），寫完CSS到了JS部分就傻了，通過查看別人的代碼也是一頭霧水。其中最不好理解的就是；1. 函數進行了二次循環；2. 數組本來就有下標，為何還需定義下標；3. this的引用如何理解。
以下是我自己（學渣）學習之后的理解，可能有不對的地方，歡迎指正。
- 二次循環：每次循環的目的不一樣，具體看代碼注釋。
- 定義數組下標：第一次循環完成之后，最后一個 i 的值是length-1，所以當我們后期需要調用每一個下標的時候，需要先對其進行定義，否則只會調用length-1的值。
- this的引用：this的用法有很多，總的來說this指代的就是引用函數的對象，而在這里this指的就是被點擊的DOM對象，即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實現選項卡切換
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.為每個getLis[i]定義索引，以便遍歷之后能夠返回調用。
getLis[i].onclick=function(){ //2.綁定點擊每個getLis[i]事件之后觸發的函數。
for(var i=0;i<getLis.length;i++){ //點擊某個getLis[i]之后，在觸發的函數里進行二次遍歷，開始設置樣式：
getLis[i].className=" "; //1.首先還原導航表的樣式，即設置類名為空。
getP[i].className="textHidden"; //2.然后設置文本類名，隱藏所有的文本內容。
}
this.className="choice"; //二次循環結束后，也就是觸發的函數最后，對this（被點擊的getLis[i]）進行樣式設置，這里是改變類名，自動獲取CSS的樣式。
getP[this.index].className="textShowed"; //然后改變需要顯示的文本的類名（由于顯示的文本與被點擊的getLis[i]的索引是一樣的，所以這里調用了點擊的getLis[i]的索引，傳給getP使用），獲取顯示屬性。
}
}
}
</script>
HTML:
<body>
<!-- HTML頁面布局 -->
<div class="container">
<div class="ul">
<ul>
<li>房產</li>
<li>家居</li>
<li>二手房</li>
</ul>
</div>
<div class="main">
<p class="textShowed">275萬購昌平鄰鐵三居 總價20萬買一居</br>200萬內購五環三居 140萬安家東三環</br>北京首現零首付樓盤 53萬購東5環50平</br>京樓盤直降5000 中信府 公園樓王現房</p>
<p class="textHidden"> 40平出租屋大改造 美少女的混搭小窩</br>經典清新簡歐愛家 90平老房煥發新生</br>新中式的酷色溫情 66平撞色活潑家居</br>瓷磚就像選好老婆 衛生間煙道的設計</p>
<p class="textHidden">通州豪華3居260萬 二環稀缺2居250w甩</br> 西3環通透2居290萬 130萬2居限量搶購</br>黃城根小學學區僅260萬 121平70萬拋!</br>獨家別墅280萬 蘇州橋2居優惠價248萬</p>
</div>
</div>
</body>
