原生js实现一个tab切换

最新推荐文章于 2024-07-12 16:27:40 发布

三十斤代码

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量202

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42526648/article/details/105846752

版权

话不多说直接看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div.top_tba{
        margin: 30px auto;
        width: 500px;
        height: 300px;
        border: 10px solid #333333;
    }
    div.Switch_card{
        display: flex;
    }
    div.Switch_card>p{
        width: 33.333%;
        height: 50px;
        background-color:skyblue;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        line-height: 50px;
    }
    div.Switch_card>p.active{
        background-color: orange;
    }
    div.Switch_card_content{
       position: relative;
    }
    div.Switch_card_content>p{
        background-color: plum;
        width: 100%;
        height: 250px;
        text-align: center;
        line-height: 250px;
        color: #fff;
        font-size: 25px;
        font-weight: bold;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
    }
    div.Switch_card_content>p.active{
        display: block;
    }
</style>
<body>
    <!-- tba切换 -->
    <div class='top_tba'>
        <!-- 切换卡 -->
        <div class="Switch_card">
            <p class="active">1</p>
            <p>2</p>
            <p>3</p>
        </div>
        <!-- 内容 -->
        <div class="Switch_card_content">
            <p class="active">1</p>
            <p>2</p>
            <p>3</p>
        </div>
    </div>
    <script src="./utils.js"></script>
    <script>
        let btns = document.querySelectorAll('div.Switch_card>P')
        let tabs = document.querySelectorAll('div.Switch_card_content>P')
        btns.forEach((item,index)=>{
            // 给我自己设置一个标识符
            item.setAttribute('index',index)
           on(item,'click',function(){
            //    清空类名
                btns.forEach((item,index)=>{
                    item.className = ''
                    tabs[index].className = ''
                })
                // 拿到设置的标识符
                let i = this.getAttribute('index')
                // 给自己添加 active 类名
                this.className = 'active'
                tabs[i].className = 'active'
           })
        })

    </script>
</body>
</html>

三十斤代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现一个tab切换

话不多说直接看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt...
复制链接

扫一扫