通过jquery实现tab切换

//css代码

　　*{
            margin: 0;
            padding: 0;
        }
    #box{
        margin: 0 auto;
        width: 800px;
        border: 5px solid #000000;
        overflow: hidden;
    }
    ul,ol{
        list-style: none;
    }
    ul{
        height: 100px;
        display: flex;
        justify-content: space-around;
        background: greenyellow;
        align-items: center;
    }
    ul li{
        width: 200px;
        font-size: 30px;
        text-align: center;
        line-height: 100px;
    }
    ul .active{
        background: red;
    }
    ol{
        height: 400px;
    }
    img{
        width: 800px;
        height: 400px;
        background-size: cover;
    }
    ol li{
        display: none;
    }
    ol .active{
        display: block;
    }

　　

//html代码　　

    <div id="box">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active"><img src="http://img.soogif.com/CRbCMVjc20u2576i2FISvoUQSgrgWk0h.gif" alt="" ></li>
            <li><img src="http://img.soogif.com/lIJibUY8hZ7leC56X9JpopINB4AM0MdJ.gif_s400x0" alt="" ></li>
            <li><img src="./images/1.jpg" alt="" ></li>
        </ol>
    </div>

　　记得先引入jquery文件 ，，下面是通过jquery写的js代码

<script src="./js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$('ul li').click(function(){
    $(this)
    .addClass('active')
    .siblings()
    .removeClass('active')
    .parent()
    .next()
    .children()
    .removeClass('active')
    .eq($(this).index())   //取当前下标
    .addClass('active');
})
// var box=document.querySelector('#box');
// var ulis=document.querySelectorAll('ul li')
// var olis=document.querySelectorAll('ol li')
// for(var i=0;i<ulis.length;i++){
//     // console.log(ulis[i]);
//      ulis[i].index=i;
//     ulis[i].onclick=function(){
//         for(var j=0; j<ulis.length;j++){
//             ulis[j].className='';
//             olis[j].className='';
//         }
//         this.className='active';
//         olis[this.index].className='active';
//     }
// }