如何使用垂直导航实现图片显示/隐藏？求jQuery解决方案

我来帮你搞定这个功能！你已经把导航项的激活状态切换做好了，接下来只需要把导航和对应的图片关联起来，就能实现点击导航显示对应图片、隐藏其他图片的效果啦。

核心思路 #

1. 给每个导航项添加data-target属性，值对应要显示的图片的ID，这样点击时就能明确要触发哪个图片
2. 给所有图片设置默认隐藏（除了默认要显示的第一张）
3. 在你已有的导航激活状态切换代码基础上，加入「隐藏所有图片 + 显示对应图片」的逻辑

完整代码示例 #

HTML 结构

<!-- 垂直导航 -->
<div class="vertical__menu">
  <div class="vertical__menu-item vertical__menu-item--active" data-target="img1">图片1</div>
  <div class="vertical__menu-item" data-target="img2">图片2</div>
  <div class="vertical__menu-item" data-target="img3">图片3</div>
</div>

<!-- 图片区域 -->
<div class="image-container">
  <img id="img1" src="https://picsum.photos/200/200?random=1" alt="图片1">
  <img id="img2" src="https://picsum.photos/200/200?random=2" alt="图片2" class="hidden">
  <img id="img3" src="https://picsum.photos/200/200?random=3" alt="图片3" class="hidden">
</div>

CSS 样式

.vertical__menu {
  width: 150px;
  background: #f0f0f0;
}
.vertical__menu-item {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
}
.vertical__menu-item--active {
  background: #4CAF50;
  color: white;
}
.image-container {
  margin-top: 20px;
}
.hidden {
  display: none;
}

jQuery 逻辑

$(document).ready(function () {
  $('.vertical__menu-item').click(function () {
    // 1. 切换导航激活状态
    $('.vertical__menu-item').removeClass("vertical__menu-item--active");
    $(this).addClass("vertical__menu-item--active");
    
    // 2. 获取当前导航对应的图片ID
    const targetImgId = $(this).data('target');
    
    // 3. 隐藏所有图片
    $('.image-container img').addClass('hidden');
    
    // 4. 显示对应图片
    $('#' + targetImgId).removeClass('hidden');
  });
});

代码解释 #

• data-target属性：作为导航和图片之间的「桥梁」，点击导航时通过$(this).data('target')拿到要显示的图片ID，让两者建立关联
• .hidden类：统一控制图片的显示/隐藏，避免重复写display: none，后期修改样式也更方便
• 逻辑顺序：先切换导航状态，再处理图片显示，保证交互的连贯性，用户能直观看到当前选中的导航和对应内容

这样修改后，点击不同的导航项，就能精准显示对应的图片啦～

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