jq实现选项卡

最新推荐文章于 2021-10-07 17:40:42 发布

Ariel_ckr

最新推荐文章于 2021-10-07 17:40:42 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html+css+js+框架文章标签： jq 选项卡 add

本文链接：https://blog.youkuaiyun.com/Ariel_201311/article/details/83096188

html+css+js+框架专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何利用jQuery库来实现交互式的选项卡效果，通过添加、删除和切换内容，为用户提供更直观的浏览体验。

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

实现效果：
在这里插入图片描述

<ul class="t-ul">
    <li class="active">吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ul>

<div class="tab-box">
    <div>吃饭</div>
    <div>睡觉</div>
    <div>打豆豆</div>
</div>

$(function () {
   $(".t-ul li").click(function () {
      //通过 .index()方法获取元素下标，从0开始，赋值给某个变量
      var _index = $(this).index();
      //让内容框的第 _index 个显示出来，其他的被隐藏
      $(".tab-box>div").eq(_index).show().siblings().hide();
      //改变选中时候的选项框的样式，移除其他几个选项的样式
      $(this).addClass("active").siblings().removeClass("active");
   });
});

 * {
        margin: 0;
        padding: 0;
    }

    .tab-box{
        width: 350px;
        margin: 20px 350px;
        text-align: center;
    }

    .tab-box div{
        display: none;
    }

    .tab-box div:first-child{
        display: block;
    }

    .t-ul {
        margin: 100px 300px 0;
    }

    .active {
        border-bottom: 1px solid blue;
    }

    .t-ul li {
        display: inline-block;
        list-style: none;
        cursor: pointer;
        padding: 6px 12px;
        width: 107px;
        text-align: center;
        margin: 0 10px;
    }