js之选项卡
Posted Hero行者
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js之选项卡相关的知识,希望对你有一定的参考价值。
接触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之选项卡的主要内容,如果未能解决你的问题,请参考以下文章