【JS】jquery-3.4.0实现点击不同的li,切换到对应的div内容

最新推荐文章于 2023-06-15 17:51:23 发布

Ning+

最新推荐文章于 2023-06-15 17:51:23 发布

阅读量1.1k

点赞数 1

分类专栏： ThreeJS

本文链接：https://blog.csdn.net/o0pk2008/article/details/102666482

版权

ThreeJS 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

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>

JS：

$(window).on('load', function(){
      $(".Content>div").eq(0).show().siblings().hide();
  });

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