jquery实现点击不同的li,切换到对应的div内容

最新推荐文章于 2023-09-25 15:20:54 发布

Alisane

最新推荐文章于 2023-09-25 15:20:54 发布

阅读量1.4w

点赞数 13

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/wsymcxy/article/details/86288719

版权

jQuery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍使用jQuery实现选项卡切换效果的方法，包括初始化显示第一个选项卡内容、为不同的选项卡添加点击事件以显示对应的内容，并调整样式。通过jQuery选择器和事件处理，实现了平滑的UI交互。

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

对应的html代码：

<ul class="tabItems">
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
</ul>
<div class="content">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

初始加载页面时，显示第一个li对应的div内容：

  $(window).load(function(){
        $(".contend>div").eq(0).show().siblings().hide();
    });

点击不同的li,并添加相应的样式和显示对应的div内容，其他同级li，去掉相应的样式和隐藏对应的div内容：

 $(".tabItems>li").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
        var index = $(this).index();
        $(".content>div").eq(index).show().siblings().hide();
    })