多种方法实现tab切换效果（HTML+css+JavaScript）

HTML
<div class="box">
        <ol>
            <li class="active">图1</li>
            <li>图2</li>
            <li>图3</li>
        </ol>
        <ul>
            <li class="active"><img src="images/1.jpg"></li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
        </ul>
    </div>

css
*{
    list-style: none;
    margin: 0;
    padding: 0;
}
.box{
    height: 600px;
    width: 500px;
    border: 1px solid #999;
    margin: 20px auto;
}
ol{
    height: 100px;
    background-color: #ccc;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
ol li{
    height: 50px;
    width: 100px;
    background-color: pink;
    line-height:50px;
    text-align: center;
    cursor: pointer;
}
ul li img{
    width: 500px;
    height: 500px;
    cursor: pointer;
}
ol li.active{
    background-color: rebeccapurple;
}
ul li{
    display: none;
}
ul li.active{
    display: block;
}

js
// 1、利用函数创建作用域
// var oli = document.querySelectorAll('ol>li')
// var uli = document.querySelectorAll('ul>li')
// for(var i=0;i<oli.length;i++){
//     function fn(i){
//         oli[i].onclick = function(){
//         for(var j=0;j<oli.length;j++){
//             oli[j].className = ''
//             uli[j].className = ''
//         }
//         this.className = 'active'
//         uli[i].className = 'active'
//     }
//     }
//     fn(i)
// }

//2、利用es6语法let变量自己创建的作用域
// var oli = document.querySelectorAll('ol>li')
// var uli = document.querySelectorAll('ul>li')
// for(let i=0;i<oli.length;i++){
//     oli[i].onclick = function(){
//         for(var j=0;j<oli.length;j++){
//             oli[j].className = ''
//             uli[j].className = ''
//         }
//         this.className = 'active'
//         uli[i].className = 'active'
//     }
// }

//3、设置下标
// var oli = document.querySelectorAll('ol>li')
// var uli = document.querySelectorAll('ul>li')
// for(var i=0;i<oli.length;i++){
//     oli[i].setAttribute('xiabiao',i)
//     oli[i].onclick = function(){
//         for(var j=0;j<oli.length;j++){
//             oli[j].className = ''
//             uli[j].className = ''
//         }
//         this.className = 'active'
//         var xiabiao = this.getAttribute('xiabiao')
//         uli[xiabiao].className = 'active'
//     }
// }


//4、对象
// var oli = document.querySelectorAll('ol>li')
// var uli = document.querySelectorAll('ul>li')
// for(var i =0;i<oli.length;i++){
//     oli[i].xiabiao = i
//     oli[i].onclick = function(){
//          for(var j=0;j<oli.length;j++){
//              oli[j].className = ''
//              uli[j].className = ''
//          }
//          this.className = 'active'
//          var xiabiao = this.xiabiao
//          uli[xiabiao].className = 'active'
//      
// }

//5、
// var oli = document.querySelectorAll('ol>li')
// var uli = document.querySelectorAll('ul>li')
// for(var i =0;i<oli.length;i++){
//     oli[i].xiabiao=i
//     oli[i].onclick = function(){
//         var active = document.querySelector('ol li.active')
//         active.className =''
//         this.className = 'active'

//         var ulActive = document.querySelector('ul li.active')
//         ulActive.className = ''
//         uli[this.xiabiao].className = 'active'
//     }
// }


//6、that
var oli = document.querySelectorAll('ol>li')
var uli = document.querySelectorAll('ul>li')
var active = document.querySelector('ol li.active')
var ulActive = document.querySelector('ul li.active')
for(var i=0;i<oli.length;i++){
    oli[i].xiabiao=i
    oli[i].onclick = function(){
        active.className = ''
        this.className = 'active'
        active = this

        ulActive.className = ''
        uli[this.xiabiao].className='active'
        ulActive = uli[this.xiabiao]
    }
}