接触js也有几天了，今天研究了一下选项卡的编写，中间磕磕绊绊，好多疑问，不过经过百度等各渠道查找，解决了遇到的问题，也做出了想要的效果。下面我放上自己的代码，也说一下遇到的困惑以及解决的办法。
选项卡需求：
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Title</title> <link rel="icon" href=""> <style> * { margin: 0; padding: 0; list-style: none; } .tab { position: relative; bottom: -1px; overflow: hidden; } .tab li { float: left; width: 100px; height: 50px; line-height: 50px; border: 1px solid #ccc; box-sizing: border-box; text-align: center; } .box { clear: both; width: 500px; height: 500px; } .box li { width: 100%; height: 100%; text-align: center; line-height: 500px; background: aquamarine; display: none; } .select { background: aquamarine; display: block !important; } .tab .select{ border-bottom: none; } </style></head><body><ul class="tab"> <li class="select">河南</li> <li>北京</li> <li>重庆</li> <li>天津</li> <li>山东</li></ul><ul class="box"> <li class="select">烩面</li> <li>烤鸭</li> <li>小面</li> <li>狗不理</li> <li>煎饼</li></ul><script> var oTab = document.getElementsByClassName("tab"); var oTabLis = oTab[0].getElementsByTagName("li"); var oBox = document.getElementsByClassName("box"); var oBoxLis = oBox[0].getElementsByTagName("li"); function change(index) { //index：给函数传入的一个形参，一个入口，实现方法的时候我们不知道用户点击哪一个li，设定一个入口，当用户点击需要页卡切换的时候，只要执行change这个方法，并把点击这个li的索引传递给我们，我们就可以在集合中通过索引获取当前点击的这个li对象 for (var i = 0; i < oTabLis.length; i++) { oTabLis[i].className = ""; //让所有的li移除select样式类 oBoxLis[i].className = ""; } //让当前点击的li有选中的样式 oTabLis[index].className = "select"; oBoxLis[index].className = "select"; } //给每一个li绑定点击事件，点击的时候执行change方法，把当前点击li的索引传递进来，实现页卡的切换。 for (var i = 0; i < oTabLis.length; i++) { oTabLis[i].myIndex = i; //这个是我遇到最困惑的地方，我在下边详细说一下。这标记为a处吧 oTabLis[i].onclick = function () { change(this.myIndex); } }</script></body></html>这里我说的都是a处的内容，也就是点击事件的部分。如果此处这样写：
for (var i = 0; i < oTabLis.length; i++) { oTabLis[i].onclick = function () { change(i); }乍一看，没有问题，但是你会发现运行不出来，这是什么情况呢？我们不妨控制台输出一下
for (var i = 0; i < oTabLis.length; i++) { oTabLis[i].onclick = function () { // change(i); console.log(i); }你会发现，不管点击哪一个li，输出的结果都是5，也就是此处的i并不是想象中点击的这个li的索引。这就很明显了，肯定是change(i)这里出现了问题。那么为什么出现这样的问题呢？
首先，我们要搞清楚，函数分为定义函数和执行函数，在这里给元素点击事件绑定方法，点击才执行，此处绑定属于创建函数，空间中存储的都是字符串：也就是说，这里的i不是变量，而是字符。因此有了下面的输出：
//第一轮 oTabLis[0].onclick = function () { console.log(i);//第二轮 oTabLis[1].onclick = function () { console.log(i);……//第五轮 oTabLis[5].onclick = function () { console.log(i);//循环结束的时候，i=5循环结束的时候，i的值是5。假设用户开始点击第二个li，开始执行第二个绑定方法（方法执行：形成一个新的作用域，把之前空间中存储的字符串转化为代码执行，console.log(i),但是此时输出的是循环结束时的5）。
所以我们用自定义属性，有了以下的代码：
for (var i = 0; i < oTabLis.length; i++) { oTabLis[i].myIndex = i;//用来存储每次循环i的值 oTabLis[i].onclick = function () { change(this.myIndex);//此处需要传递当前点击这个li的索引 //this：当前点击的这个li //this.myIndex：当前点击这个li的myIndex这个自定义属性的值 } }i=0 oTabLis[0].myIndex = 0;i=1 oTabLis[1].myIndex = 1;i=2 oTabLis[2].myIndex = 2;i=3 oTabLis[3].myIndex = 3;i=4 oTabLis[4].myIndex = 4;//这里相当于给每个li添加了一个便签，方便取用。以上就是我对选项卡的理解以及遇到的问题，如有表达错误的地方，请及时提出！
