接触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添加了一个便签，方便取用。以上就是我对选项卡的理解以及遇到的问题，如有表达错误的地方，请及时提出！
js之选项卡
原文地址：https://www.cnblogs.com/wangxingren/p/10122173.html