jquery实现标签样式切换，以及切换显示不同内容

最新推荐文章于 2024-11-11 11:10:09 发布

Gordon-Liu

最新推荐文章于 2024-11-11 11:10:09 发布

阅读量1.5k

点赞数

分类专栏： jquery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_46547740/article/details/121691529

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

标签样式切换

$(".product_core_info_row").click(function () {	//点击列表集合，切换不同标签并显示样式
    $(this)
      .addClass("product_core_info_row_active") //添加已设置好的样式，在html中先添加一个默认的
      .siblings()
      .removeClass("product_core_info_row_active");
  });

切换显示不同内容

let liList = $(".product_core_info_row");  //获取按钮集合
  let divList = $(".product_core_info_row_data");  //获取容器集合
  divList[0].style.display = "block"; //默认显示第一个内容
  liList.click(function() {
    let clickIndex = $(this).index(); //获取点击的下标
    divList.css("display", "none"); //将所有的内容都隐藏
    divList[clickIndex].style.display = "block";  //显示点击对应下标的内容
  })