动态生成的tab选项卡功能

最新推荐文章于 2025-05-20 18:07:14 发布

原创最新推荐文章于 2025-05-20 18:07:14 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

个人日记专栏收录该内容

108 篇文章

订阅专栏

本文介绍了一种使用纯CSS和JavaScript实现的简洁美观的Tab切换效果。通过为不同的内容块添加显示和隐藏的类来实现内容切换，并利用CSS进行样式美化。

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

这里写图片描述

<style>
    *{margin: 0;padding: 0;}
    .wrap{width: 300px;height: 250px;border:1px solid green;margin: 50px auto;}
    ul{list-style: none; height:40px;border-bottom: 1px solid red;}
    li{width: 100px; box-sizing: border-box;float: left;line-height: 40px;text-align: center;font-weight: bold;}
    .container{box-sizing: border-box;padding: 10px;}
    .active{color: red;background-color: yellow;}
    .con{display: none;}
    .show{display: block;}
</style>

<div>
    <ul>
        <li>社会新闻</li>
        <li>体育世界</li>
        <li>娱乐圈</li>
    </ul>
    <div class="container">
        <div class="con show">
            <p>社会新闻设置</p>
        </div>
        <div class="con show">
            <p>社会新闻设置</p>
        </div>
        <div class="con show">
            <p>社会新闻设置</p>
        </div>
    </div>
</div>

$(function(){
        $(".li").click(function(){
            var index = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            $(".con").eq(index).addClass("show").siblings().removeClass("show");
        })
    });