最终效果如下：
tab切换案例
html布局如下：
<style type="text/css">
.tab{
border:5px solid #999;
width:500px;
margin:0 auto;
height:350px;
overflow:hidden;
}
.tab ul,.tab ol{
list-style:none;
padding:0;
margin:0;
}
.tab ul{
display:flex;
justify-content:space-evenly;
background:pink;
}
.tab ul li{
width:150px;
height:50px;
line-height:50px;
font-size:30px;
font-weight:bold;
text-align:center;
background:pink;
}
.tab ul li.active{
background:#ff0;
}
.tab ol li{
height:300px;
text-align:center;
display:none;
}
.tab ol li a img{
width: 500px;
height: 300px;
}
.tab ol li.active{
display:block;
}
.tab:hover{
cursor: pointer;
}
</style>
<div class="tab">
<ul>
<li class="active">小猪</li>
<li>小狗</li>
<li>猩猩</li>
</ul>
<ol>
<li class="active">
<a href="">
<img src="./img/1.jpg" alt="">
</a>
</li>
<li>
<a href="">
<img src="./img/2.jpg" alt="">
</a>
</li>
<li>
<a href="">
<img src="./img/3.jpg" alt="">
</a>
</li>
</ol>
</div>
js实现代码：
// 获取所有标签
var oUlis = document.querySelectorAll('.tab ul li');
var oOlis = document.querySelectorAll('.tab ol li');
具体切换的js代码写法有多种
方法一：提前给所有li添加属性(显示在标签上的属性)，值为下标
// 遍历ul中所有li
for(var i=0;i<oUlis.length;i++){
// 给所有ul下的li添加属性，值为他们在ul中的下标
oUlis[i].setAttribute('index',i)
// 给ul下所有li绑定单击事件
oUlis[i].onclick = function(){
// 将所有li标签的类名清空
for(var j=0;j<oUlis.length;j++){
oUlis[j].className = ''
oOlis[j].className = ''
}
// 给当前点击的ul下的li添加active类名
this.className = 'active';
// 找到当前li在ul中的下标
var index = this.getAttribute('index')
// 根据当前li的下标找到对应的ol下应该显示的li,给他添加active类名
oOlis[index].className = 'active';
}
}
方法二：提前给所有li添加属性(不显示在标签上的属性)，值为下标
for(var i=0;i<oUlis.length;i++){
// 给所有ul下的li添加属性，值为他们在ul中的下标
oUlis[i].index = i
// 给ul下所有li绑定单击事件
oUlis[i].onclick = function(){
// 将所有li标签的类名清空
for(var j=0;j<oUlis.length;j++){
oUlis[j].className = ''
oOlis[j].className = ''
}
// 给当前点击的ul下的li添加active类名
this.className = 'active';
// 找到当前li在ul中的下标
var index = this.index
// 根据当前li的下标找到对应的ol下应该显示的li,给他添加active类名
oOlis[index].className = 'active';
}
}
方法三：在事件外嵌套一个自调用函数，将遍历的下标当做参数传入
for(var i=0;i<oUlis.length;i++){
(function(i){
// 给ul下所有li绑定单击事件
oUlis[i].onclick = function(){
// 将所有li标签的类名清空
for(var j=0;j<oUlis.length;j++){
oUlis[j].className = ''
oOlis[j].className = ''
}
// 给当前点击的ul下的li添加active类名
this.className = 'active';
// 根据当前li的下标找到对应的ol下应该显示的li,给他添加active类名
oOlis[i].className = 'active';
}
})(i)
}
方法四：将循环的i使用es6提供的let关键字来定义
for(let i=0;i<oUlis.length;i++){
// 给ul下所有li绑定单击事件
oUlis[i].onclick = function(){
// 将所有li标签的类名清空
for(var j=0;j<oUlis.length;j++){
oUlis[j].className = ''
oOlis[j].className = ''
}
// 给当前点击的ul下的li添加active类名
this.className = 'active';
// 根据当前li的下标找到对应的ol下应该显示的li,给他添加active类名
oOlis[i].className = 'active';
}
}
方法五：在清除所有标签类名的时候，有2个标签本来就没有类名，是无辜的，其实只需要清除带有active类名的标签的类名即可
var uliActive = document.querySelector('.tab ul li.active');
var oliActive = document.querySelector('.tab ol li.active');
for(let i=0;i<oUlis.length;i++){
// 给ul下所有li绑定单击事件
oUlis[i].onclick = function(){
// 将带有active类名的li标签的类名清空
uliActive.className = '';
oliActive.className = '';
// 给当前点击的ul下的li添加active类名
this.className = 'active';
// 根据当前li的下标找到对应的ol下应该显示的li,给他添加active类名
oOlis[i].className = 'active';
// 将此时带有active类名的标签赋值给上面的变量，以便下次清除时使用
uliActive = this;
oliActive = oOlis[i];
}
}
总结：上述几种方法为什么要纠结当前点击的li的下标呢？因为循环中绑定事件，当事件触发的时候，循环的变量已经是循环结束的变量值了。
页面打开或刷新的时候，循环已经运行结束了，然后才触发的事件，事件中使用的循环的变量，在事件函数的作用域中并没有定义，所以会从上一层作用域(全局)中找这个变量的定义，全局中的循环已经运行结束了，所以循环的变量，无论点击哪一个标签，循环的变量已经是循环结束的值了。
所以，这多种方法，其实都是在通过各种方式来得到当前点击的这个li标签在ul中的下标。
网友评论