tab切换案例

最终效果如下：

tab切换案例

html布局如下：

    

        
小猪
        
小狗
        
猩猩
    
    

        

            
                
            
        
        

            
                
            
        
        

            
                
            
        
    

js实现代码：

// 获取所有标签
var oUlis = document.querySelectorAll('.tab ul li');
var oOlis = document.querySelectorAll('.tab ol li');

具体切换的js代码写法有多种
方法一：提前给所有li添加属性(显示在标签上的属性)，值为下标

// 遍历ul中所有li
for(var i=0;i

方法二：提前给所有li添加属性(不显示在标签上的属性)，值为下标

for(var i=0;i

方法三：在事件外嵌套一个自调用函数，将遍历的下标当做参数传入

for(var i=0;i

方法四：将循环的i使用es6提供的let关键字来定义

for(let i=0;i

方法五：在清除所有标签类名的时候，有2个标签本来就没有类名，是无辜的，其实只需要清除带有active类名的标签的类名即可

var uliActive = document.querySelector('.tab ul li.active');
var oliActive = document.querySelector('.tab ol li.active');
for(let i=0;i

总结：上述几种方法为什么要纠结当前点击的li的下标呢？因为循环中绑定事件，当事件触发的时候，循环的变量已经是循环结束的变量值了。
页面打开或刷新的时候，循环已经运行结束了，然后才触发的事件，事件中使用的循环的变量，在事件函数的作用域中并没有定义，所以会从上一层作用域(全局)中找这个变量的定义，全局中的循环已经运行结束了，所以循环的变量，无论点击哪一个标签，循环的变量已经是循环结束的值了。
所以，这多种方法，其实都是在通过各种方式来得到当前点击的这个li标签在ul中的下标。