tab切换—闭包实现

最新推荐文章于 2024-05-18 06:08:21 发布

老路的武器库

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量100

点赞数 1

文章标签： css 前端 css3 html javascript

本文链接：https://blog.csdn.net/Lzen6719/article/details/128243717

版权

使用闭包创建tab切换，好处就是方便封装，当遇到一个页面有很多tab切换的时候，可以直接进行调用

html代码

<body>
    <div class="box">
        <ul>
            <li class="bg">列表一</li>
            <li>列表二</li>
            <li>列表三</li>
            <li>列表四</li>
            <li>列表五</li>
        </ul>
        <h1 class="show"><img src="./imgs/1.jpg" alt=""></h1>
        <h1><img src="./imgs/2.jpg" alt=""></h1>
        <h1><img src="./imgs/3.jpg" alt=""></h1>
        <h1><img src="./imgs/4.jpg" alt=""></h1>
        <h1><img src="./imgs/5.jpg" alt=""></h1>
    </div>
</body>

css代码

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 500px;
            /* height: 400px; */
            margin: 20px auto;
            border: 2px solid black;
        }
        .box ul{
            display: flex;
            justify-content: center;
        }
        li{
            width: 99px;
            line-height: 35px;
            text-align: center;
            background-color: rgb(171, 126, 126);
            font-size: 15px;
            font-weight: bold;
            border-right: 1px solid pink;
            cursor: pointer;
        }
        .bg{
            background-color: violet !important;
        }
        h1{
            display:none;
        }
        .show{
            display: block !important;
        }
        img{
            width: 500px;
        }
    </style>

js代码

制作
    // 获取操作对象
    let lis = document.querySelectorAll('li')
    let hs = document.querySelectorAll('h1')

    //遍历每个li，并添加点击事件
    for(var i=0; i<lis.length; i++){
        //添加点击事件并调用闭包函数
        lis[i].onclick=fn1(i)
    }

    //创建闭包
    function fn1(e){
        return function(){
            //利用排他思想清除li样式
            for(var j=0; j<lis.length; j++){
                lis[j].className=''
                hs[j].className=''
            }
            //给点击的li和对应的hs标签添加样式
            lis[e].className='bg'
            hs[e].className='show'
        }
    }