使用事件委托构建可切换的 JavaScript 图片文本画廊

<div class="col-md-4 center album1">
  <a href="adrbirouri.html"> <img class="img-prezentare" src="..." data-album="album 1"></a>
  <div class="text-poze"> ADR Birouri </div>
</div>

<div class="col-md-4 center album" id="album1">
  <a href="adrbirouri.html"> <img class="img-prezentare" src="..."></a>
  <div class="text-poze"> ADR Birouri </div>
</div>

window.addEventListener("DOMContentLoaded", () => {
  // 获取导航容器和所有导航链接
  const nav = document.querySelector(".selector");
  const links = nav.querySelectorAll("a");
  // 获取所有相册容器
  const albums = document.querySelectorAll(".album");

  // 使用事件委托在导航容器上监听点击事件
  nav.addEventListener("click", e => {
    // 检查点击事件的目标是否是<a>标签或其内部元素
    const tgt = e.target.closest("a");
    if (tgt) {
      // 阻止默认的链接跳转行为
      e.preventDefault();

      // 切换导航链接的激活状态
      // 为当前点击的链接添加'active'类，并移除其他链接的'active'类
      links.forEach(lnk => lnk.classList.toggle("active", lnk === tgt));

      // 根据点击的链接控制相册容器的可见性
      // 遍历所有相册容器
      albums.forEach(album => {
        // album.hidden 是一个布尔属性，当为 true 时，元素会被隐藏
        // 逻辑解释：
        // tgt.dataset.album 获取点击链接的data-album属性值 (例如 "album1", "album2", "all")
        // album.id 获取当前遍历到的相册容器的id (例如 "album1", "album2", "album3")
        // [album.id, "all"].includes(tgt.dataset.album) 检查点击的相册ID是否与当前相册ID匹配，或者点击的是"all"选项
        // 如果匹配或点击"all"，则返回 true，表示该相册应该显示
        // 前面的 ! 运算符将其反转，所以如果应该显示，则 !true 为 false，即 album.hidden = false (显示)
        // 如果不匹配且不是"all"，则返回 false，表示该相册应该隐藏
        // 前面的 ! 运算符将其反转，所以如果应该隐藏，则 !false 为 true，即 album.hidden = true (隐藏)
        album.hidden = ![album.id, "all"].includes(tgt.dataset.album);
      });
    }
  });
});

<div class="selector text-center justify-content-evenly">
  <a href="#" data-album="album1" class="active">album 1</a>
  <a href="#" data-album="album2">album 2</a>
  <a href="#" data-album="album3">album 3</a>
  <a href="#" data-album="all">all</a>
</div>

<div class="row justify-content-evenly">
  <!-- 相册 1 -->
  <div class="col-md-4 center album" id="album1">
    <a href="adrbirouri.html"> <img class="img-prezentare" src="https://www.wall-street.ro/image_thumbs/thumbs/734/7342c107fcfac43c575acfe686ece344-1063x560-00-86.jpg?v=1469023098"></a>
    <div class="text-poze"> ADR Birouri </div>
  </div>

  <!-- 相册 2，初始隐藏 -->
  <div class="col-md-4 center album" id="album2" hidden>
    <a href="baiamare.html"><img class="img-prezentare" src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Baia_Mare-_centru_istoric.jpg"></a>
    <div class="text-poze"> Bloc Baia Mare</div>
  </div>

  <!-- 相册 3，初始隐藏 -->
  <div class="col-md-4 center album" id="album3" hidden>
    <a href="nisipari.html"><img class="img-prezentare" src="https://static.wikia.nocookie.net/genealogy/images/4/45/Scoala_Nisipari.jpg/revision/latest/scale-to-width-down/250?cb=20120804221616"></a>
    <div class="text-poze">Bloc Nisipari</div>
  </div>
</div>

/* 导航链接样式 */
.selector a  {
  text-decoration: none; /* 移除下划线 */
  padding: 5px 10px;
  margin: 0 5px;
  color: #333;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}
/* 激活状态的导航链接样式 */
.selector a.active  {
  text-decoration: underline; /* 激活时显示下划线 */
  font-weight: bold;
  color: #007bff;
  border-color: #007bff;
}

/* 图片尺寸控制 */
.album img {
  height: 100px; /* 统一图片高度 */
  width: auto; /* 保持图片比例 */
  display: block; /* 确保图片独占一行 */
  margin: 0 auto 10px; /* 居中并添加底部间距 */
}

/* 文本样式 */
.text-poze {
  text-align: center;
  font-size: 0.9em;
  color: #666;
}

/* 相册容器的通用样式 */
.album {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 5px;
  background-color: #f9f9f9;
}

/* .hidden 属性会自动使元素 display: none; */
/* 可以在需要时添加额外的样式覆盖，但通常不需要 */