如何用jQuery实现点击项显示对应info div并添加active类（DOM非相邻）

开发者阿泽

2026-5-21

用jQuery实现跨DOM结构的点击切换内容功能

嘿，这个需求其实用jQuery结合data-*属性就能轻松搞定，刚好能解决info div不在相邻位置的问题，我给你一步步拆解：

第一步：调整HTML结构，用data属性建立关联

首先我们要给每个.item添加data-target属性，值对应对应.info元素的ID，这样就能把点击的item和要显示的info绑定起来，不管info嵌套在哪里都能找到它：

<div class="item" data-target="food-info">Food</div>
<div class="item" data-target="music-info">Music</div>
<div class="item" data-target="transport-info">Transport</div>

<!-- 不管info嵌套在哪个容器里都没问题，比如这里放在一个独立的容器中 -->
<div class="some-other-container">
  <div id="food-info" class="info active">这里是Food的详细内容...</div>
  <div id="music-info" class="info">这里是Music的详细内容...</div>
  <div id="transport-info" class="info">这里是Transport的详细内容...</div>
</div>

第二步：写CSS控制显示/隐藏

默认把所有.info隐藏，只有带active类的才显示：

.info {
  display: none; /* 默认隐藏所有信息块 */
}
.info.active {
  display: block; /* 激活的信息块显示 */
}

第三步：jQuery核心逻辑

点击item时，先移除所有info的active类（隐藏其他），再给对应的info加上active类：

$(document).ready(function() {
  // 给所有.item绑定点击事件
  $('.item').on('click', function() {
    // 第一步：先把所有info的active类去掉，隐藏其他内容
    $('.info').removeClass('active');
    // 第二步：获取当前点击item对应的target ID（从data-target属性里拿）
    const targetInfoId = $(this).data('target');
    // 第三步：给对应的info元素添加active类，显示它
    $('#' + targetInfoId).addClass('active');
  });
});