jq实现tab选项卡

最新推荐文章于 2022-08-02 15:55:50 发布

大可&不必

最新推荐文章于 2022-08-02 15:55:50 发布

阅读量420

点赞数

分类专栏： jquery 原生javascript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/style201904/article/details/106278275

版权

原生javascript 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

jquery

10 篇文章 0 订阅

订阅专栏

<div class="tab">
        <ul class="tab-title">
          <li class="this">网站设置</li>
          <li>用户管理</li>
          <li>权限分配</li>
          <li>商品管理</li>
          <li>订单管理</li>
        </ul>
        <div class="tab-content">
          <div class="tab-item show">内容1</div>
          <div class="tab-item">内容2</div>
          <div class="tab-item">内容3</div>
          <div class="tab-item">内容4</div>
          <div class="tab-item">内容5</div>
        </div>
      </div>

<script>
   $('.tab-title li').on('click',function(){
       $(this).addClass('this').siblings().removeClass("this");;
       var index = $(this).index();
       //siblings() 同级，同胞元素
       //parent() 获得当前匹配元素的父元素
　　　　$(this).parent().siblings().children().eq(index).addClass("show")
　　　　.siblings().removeClass("show");
       
   })
</script>

在这里插入图片描述