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

Gordon-Liu

于 2021-12-03 09:32:42 发布

阅读量1.5k

点赞数

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

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

版权

jquery 专栏收录该内容

1 篇文章

订阅专栏

这段代码展示了如何使用JavaScript实现列表元素的样式切换，并根据点击事件动态显示不同的内容。当用户点击.product_core_info_row元素时，添加产品核心信息的活跃样式，并移除兄弟元素的该样式。同时，点击列表项会隐藏所有内容容器，然后显示所选内容对应的详情。

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

标签样式切换

$(".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";  //显示点击对应下标的内容
  })