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