TAB选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../../css/diy-default.css">
<link rel="stylesheet" href="../../css/resetm.css">
<style>
.ul1 li {
text-align: center;
list-style: none;
width: 100px;
line-height: 50px;
border: 2px solid red;
margin-left: 2px;
margin-right: 2px;
float: left;
}
.ul1 .selected {
background-color: red;
}
.ul1 li:nth-child(1) {
margin-left: 0px;
}
.ul2,
.ul2 li {
width: 536px;
height: 536px;
line-height: 536px;
float: left;
text-align: center;
list-style: none;
}
.ul2 li {
display: none;
}
.ul2 .selected {
display: block;
background-color: #ADFF2F;
}
.ul2 li {
display: none;
}
</style>
</head>
<body>
<ul class="ul1 cl">
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
</ul>
<ul class="ul2 cl">
<li class="selected">28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
</ul>
</body>
<script>
var li1 = document.querySelectorAll(".ul1 li");
var li2 = document.querySelectorAll(".ul2 li");
tab(li1, li2, "selected");
//绑定事件
//参数绑定,需要什么用什么绑到this上面
//通过i,j的对应关系达成效果
//this绑定
// function tab(ele1, ele2, class_selected) {
// for (let i = 0; i < ele1.length; i++) {
// var lis = ele1[i];
// lis.index = i;
// lis.onclick = function() {
// for (let j = 0; j < ele2.length; j++) {
// if (i == j) {
// ele1[j].className = class_selected;
// ele2[j].className = class_selected;
// } else {
// ele1[j].removeAttribute("class");
// ele2[j].removeAttribute("class");
// }
// }
// }
// }
// }
//let预编译
function tab(ele1, ele2, class_selected) {
for (let i = 0; i < ele1.length; i++) {
var lis = ele1[i];
lis.onclick = function() { //i一定是当前次数的i
for (let j = 0; j < ele2.length; j++) {
if (i == j) {
ele1[j].className = class_selected;
ele2[j].className = class_selected;
} else {
ele1[j].removeAttribute("class");
ele2[j].removeAttribute("class");
}
}
}
}
};
//函数自运行 没啥意义 外面无法访问里面的变量 闭包
// (function tab(ele1, ele2, class_selected) {
// for (let i = 0; i < ele1.length; i++) {
// var lis = ele1[i];
// lis.onclick = function() { //i一定是当前次数的i
// for (let j = 0; j < li2.length; j++) {
// if (i == j) {
// ele1[j].className = class_selected;
// li2[j].className = class_selected;
// } else {
// ele1[j].removeAttribute("class");
// li2[j].removeAttribute("class");
// }
// }
// }
// }
// })(li1, li2, "selected");
</script>
</html>
效果