js写选项卡-tab切换

js写选项卡-tab切换

css代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li,ol li{
            list-style: none;
        }
        .box{
            width: 600px;
            height: 400px;
            border: 3px solid pink;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
        }
        .box>ul{
            height: 60px;
            display: flex;
        }
        .box>ul>li{
            flex: 1;
            color: #fff;
            background-color: turquoise;
            font-size: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        .box>ul>li.active{
            background-color: orange;
        }
        .box>ol{
            flex: 1;
            position: relative;
        }
        .box>ol>li{
            width: 100%;
            height: 100%;
            background-color: orangered;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 100px;
            position: absolute;
            left: 0;
            bottom: 0;
            display: none;
        }
        .box>ol>li.active{
            display: flex;
        }
    </style>

html代码

<div class="box">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>

js代码

<script>
    //1.获取元素
    var btns=document.querySelectorAll('ul>li')
    var tabs=document.querySelectorAll('ol>li')

    //2.给btns里所有按钮添加点击事件
    btns.forEach(function(item,index){
        item.onclick=function(){
            //2.2 给btns和tabs里面所有内容取消active类名
            btns.forEach(function(t,i){
                t.className=''
                tabs[i].className=''
            })
            //2.3 当前点击的按钮和对应的盒子添加active类名
            item.className='active'
            tabs[index].className='active'
        }
    })
</script>