原生javascript实现选项卡切换效果

最新推荐文章于 2022-08-14 15:21:43 发布

#麻辣小龙虾#

最新推荐文章于 2022-08-14 15:21:43 发布

阅读量665

点赞数 1

分类专栏： javascript web前端文章标签： javascript

本文链接：https://blog.csdn.net/CodingNoob/article/details/76128614

版权

web前端同时被 2 个专栏收录

99 篇文章 2 订阅

订阅专栏

javascript

90 篇文章 1 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tab .title span{display: inline-block;padding:5px 10px;background:#ccc;}
        .title .active{color:red;}
        .hidden{display:none;}
        .content{width:200px;height:200px;border:1px solid #ccc;}
        .content .active{display: block;}
    </style>
</head>
<body>
    <div class="tab">
        <div class="title">
            <span class="active">1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <div class="content">
            <div class="hidden active">1内容</div>
            <div class="hidden">2内容</div>
            <div class="hidden">3内容</div>
        </div>
    </div>
</body>
</html>
<script>
    function $$(selector){
        return document.querySelectorAll(selector);
    }

    function $(selector){
        return document.querySelector(selector);
    }

    var tabbtn = $$(".tab .title span");
    var tabbox = $$(".tab .content div");

    for(var i = 0, len = tabbtn.length; i < len; i++){
        (function(k){
            tabbtn.item(k).onclick = function(){
                $(".title .active").classList.remove("active");
                this.classList.add("active");
                $(".content .active").classList.remove("active");
                tabbox.item(k).classList.add("active");
            }
        })(i);
    }

</script>

#麻辣小龙虾#

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生javascript实现选项卡切换效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .tab .title span{display: inline-block;padding:5px 10px;background:#ccc;} .title
复制链接

扫一扫

专栏目录