使用JavaScript实现选项卡切换效果-优快云博客

本文链接：https://blog.youkuaiyun.com/pengzihui/article/details/104884097

本文详细介绍了如何使用JavaScript配合HTML和CSS实现一个基本的选项卡切换功能，包括动态切换内容显示、添加样式变化等关键步骤，适合前端开发者学习实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
        .box{width: 500px;height: 400px;border: solid 1px black;margin: 20px auto;}
        .box ul{margin: 0;padding: 0;list-style: none;height: 40px;line-height
        :40px;display: flex;background: #ccc;text-align: center;}
        .box li{flex:1;border-left: solid 1px black;border-right: solid 1px black;}
        .box li.active{background: red;}
        .cont div{width: 500px;height: 360px;display: none;}
        .cont .cont1{background: #f0f;display: block;}
        .cont .cont2{background: #f00;}
        .cont .cont3{background: #00f;}
    </style>

<body>
    <div class="box">
        <ul><li class="active">新闻</li><li>招聘</li><li>广告</li></ul>
        <div class="cont">
            <div class="cont1">第一个选项卡的内容区域</div>
            <div class="cont2">第二个选项卡的内容区域</div>
            <div class="cont3">第三个选项卡的内容区域</div>
        </div>
    </div>
</body>

<script>
    var ali = document.querySelectorAll(".box li");
    var acont = document.querySelectorAll(".cont div");
    for(var i=0;i<ali.length;i++){
        ali[i].setAttribute("bianhao",i);
        ali[i].onclick = function(){
            for(var j=0;j<ali.length;j++){
                ali[j].className = "";
                acont[j].style.display = "none";
            }
            this.className = "active";
            var dangQianLiDeBianHao = this.getAttribute("bianhao");
            // console.log(dangQianLiDeBianHao);
            acont[dangQianLiDeBianHao].style.display = "block";
        }
    }
</script>

js 实现选项卡切换功能