借助CSS与JS实现点击显示/隐藏指定元素的技术求助

使用WordPress搭配Elementor搭建网站，需要实现点击控制区的自行车图片时，仅展示对应的详情元素组合：比如点击第一张黑色自行车图，只显示"Panigale V4 SP2"标题、该黑色自行车图、「查看更多」按钮及对应描述组。当前代码无法实现预期效果，站点地址：aleksanderm4.sg-host.com

修正后的实现代码 #

1. HTML（Elementor中添加） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

（注：如果WordPress已默认加载jQuery，这一行可省略）

2. CSS（Elementor自定义CSS面板） #

:root {
  --activeC: #ffffffbf;
}

/* 初始隐藏所有详情元素，仅显示第一个组合 */
.details-area > .elementor-element {
  display: none;
}
.details-area > .elementor-element:first-child {
  display: block;
}

/* 控制区激活元素样式 */
.control-area > .elementor-element.active {
  background-color: var(--activeC) !important;
}

/* 自行车背景图适配样式 */
.bike-bg img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

selector .elementor-element {
  position: static !important;
}

3. JavaScript（Elementor自定义HTML模块或代码小工具） #

var $ = jQuery;
$(document).ready(function() {
  // 页面加载时默认激活第一个控制元素
  $('.control-area > .elementor-element').first().addClass('active');

  $('.control-area > .elementor-element').on('click', function() {
    // 获取当前点击元素的索引（从0开始计数）
    var currentIndex = $(this).index();
    
    // 切换控制区激活状态
    $('.control-area > .elementor-element').removeClass('active');
    $(this).addClass('active');

    // 切换详情区展示内容：隐藏所有，仅显示对应索引的组合
    $('.details-area > .elementor-element').hide();
    $('.details-area > .elementor-element').eq(currentIndex).show();
  });
});

关键修改说明 #

• 索引逻辑简化：直接用$(this).index()获取控制元素的顺序索引，确保和详情区元素的分组索引严格对应，避免原代码冗余计算导致的匹配错误
• 初始状态完善：页面加载时默认激活第一个控制元素并展示对应详情组，符合常规页面的默认展示逻辑
• 兼容性优化：统一隐藏所有详情元素，后续新增自行车项无需修改CSS，扩展性更强

内容的提问来源于stack exchange，提问作者Aleksander Mularz