点击图片导航加载目标Div并隐藏非活跃项，页面默认加载首个Div求解决方案

问题分析 #

现有代码存在以下问题导致功能失效：

• 选择器语法错误，无法正确定位DOM元素
• 点击事件未关联对应内容区块的切换逻辑
• 页面初始化未默认激活第一个内容区块

修正后完整代码 #

HTML（补充缺失的内容区块）

<div id="mus">
  <div class="albnav">
    <img id="gen0" class="menu active" src="https://via.placeholder.com/80" alt="Gen 0" />
    <img id="gen1" class="menu" src="https://via.placeholder.com/80" alt="Gen 1" />
    <img id="gen2" class="menu" src="https://via.placeholder.com/80" alt="Gen 2" />
    <img id="gen3" class="menu" src="https://via.placeholder.com/80" alt="Gen 3" />
    <img id="gen4" class="menu" src="https://via.placeholder.com/80" alt="Gen 4" />
    <img id="gen5" class="menu" src="https://via.placeholder.com/80" alt="Gen 5" />
  </div>
  
  <div id="tunes">
    <div class="gen-content gen0">Gen 0 内容</div>
    <div class="gen-content gen1">Gen 1 内容</div>
    <div class="gen-content gen2">Gen 2 内容</div>
    <div class="gen-content gen3">Gen 3 内容</div>
    <div class="gen-content gen4">Gen 4 内容</div>
    <div class="gen-content gen5">Gen 5 内容</div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

CSS（可选，添加激活状态样式）

.menu.active {
  border: 2px solid #007bff; /* 示例：激活的导航加高亮边框 */
}
.gen-content {
  display: none;
}
.gen-content.active {
  display: block;
}

JavaScript

$(document).ready(function() {
  // 页面初始化：默认显示第一个内容区块
  $('.gen-content').first().addClass('active');
  
  // 导航点击事件绑定
  $('.menu').click(function() {
    // 更新导航激活状态
    $(this).addClass('active').siblings('.menu').removeClass('active');
    
    // 获取当前导航对应的内容区块类名
    const targetClass = '.' + $(this).attr('id');
    
    // 切换内容区块显示状态
    $('.gen-content').removeClass('active');
    $(targetClass).addClass('active');
  });
});

核心逻辑说明 #

1. 初始化处理：页面加载完成后，自动给第一个内容区块和导航添加active类，确保默认显示第一个内容。
2. 点击切换逻辑：
   • 点击导航图片时，先更新导航的激活状态（当前导航加active，其他导航移除）
   • 通过导航的id匹配对应的内容区块类名，隐藏所有内容后仅显示目标区块
3. 样式控制：用CSS的display属性控制内容显示/隐藏，比直接调用jQuery的show()/hide()更高效。

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