jQuery选项卡

最新推荐文章于 2022-10-24 17:31:20 发布

原创最新推荐文章于 2022-10-24 17:31:20 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用CSS隐藏不需要显示的内容，并通过jQuery实现标签页的切换效果。具体包括设置CSS样式使某些元素默认不显示，利用jQuery遍历元素并绑定点击事件，当点击不同标签时显示对应的内容。

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

css:
.asset_total_cons .asset_total_des {
    display: none;
}


html:

<nav class="announce_nav pd-lr16 marginTop20">
    <a href="javascript:void(0);" class="on">1</a>
    <a href="javascript:void(0);">2</a>
</nav>
<div class="asset_total_cons">
    <div style="display: block" class="asset_total_des">1</div>
    <div class="asset_total_des">2</div>
</div>

jQuery:

$(".announce_nav a").each(function (i) {
    $(this).click(function () {
        $(this).addClass("on").siblings().removeClass("on");
        $(".asset_total_cons .asset_total_des").eq(i).show().siblings().hide();
    });
});

注意：一定要给每个part添加className，，，不可.asset_total_cons div { display: none; }....