jq实现tab选项卡

标签: 原生javascript  jquery  javascript  jquery

<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>

在这里插入图片描述

版权声明:本文为style201904原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/style201904/article/details/106278275