距今学习前端已经有一个多月了，大概六月上旬开始看视频教程和做练习，直到现在刚做完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>
网友评论