如何使用JS实现点击HTML列表项显示对应隐藏图片的功能

实现方案 #

1. 先修正原有HTML的语法问题 #

原有li标签的class属性写法不规范，调整后建议给列表和图片分别加外层容器，避免和页面其他元素冲突：

<ul id="nav-list">
  <li class="nav-1"><a href="#">Hello1</a></li>
  <li class="nav-1"><a href="#">Hello2</a></li>
  <li class="nav-1"><a href="#">Hello3</a></li>
</ul>

<div id="img-container">
  <img src="images/1.jpg" alt="image1">
  <img src="images/2.jpg" alt="image2">
  <img src="images/3.jpg" alt="image3">
</div>
<!-- 可选遮罩层，实现点击空白关闭弹窗效果 -->
<div class="mask"></div>

2. 添加CSS实现默认隐藏和弹窗样式 #

/* 所有图片默认隐藏 */
#img-container img {
  display: none;
  /* 弹窗悬浮效果样式 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  max-width: 90vw;
  max-height: 90vh;
}

/* 遮罩层样式 */
.mask {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

3. 编写JavaScript交互逻辑 #

// 获取页面元素
const navItems = document.querySelectorAll('.nav-1');
const imgs = document.querySelectorAll('#img-container img');
const mask = document.querySelector('.mask');

// 给每个列表项绑定点击事件
navItems.forEach((item, idx) => {
  item.addEventListener('click', (e) => {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 先隐藏所有图片
    imgs.forEach(img => img.style.display = 'none');
    // 显示当前点击项对应的图片
    imgs[idx].style.display = 'block';
    // 显示遮罩层
    mask.style.display = 'block';
  })
})

// 点击遮罩层关闭显示的图片
mask.addEventListener('click', () => {
  imgs.forEach(img => img.style.display = 'none');
  mask.style.display = 'none';
})

扩展说明 #

如果后续需要频繁增减列表和图片项，推荐用自定义属性绑定的方式替代索引关联，避免索引错乱问题：

• 给li加data-img属性，值对应要显示的图片序号：<li class="nav-1" data-img="1"><a href="#">Hello1</a></li>
• 对应JS调整为如下逻辑即可：

navItems.forEach(item => {
  item.addEventListener('click', (e) => {
    e.preventDefault();
    const imgIndex = item.dataset.img - 1;
    imgs.forEach(img => img.style.display = 'none');
    imgs[imgIndex].style.display = 'block';
    mask.style.display = 'block';
  })
})

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