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

最新推荐文章于 2025-06-15 15:26:19 发布

原创最新推荐文章于 2025-06-15 15:26:19 发布 · 722 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

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

99 篇文章

订阅专栏

javascript

90 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面使用纯JavaScript实现了Tab切换效果。通过为不同的内容区域设置CSS样式并使用JavaScript来切换这些内容的显示状态，从而创建了一个具有基本交互性的Tab组件。代码示例中包含了HTML结构、CSS样式以及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 .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>