JavaScript图片画廊：实现文本与图片同步隐藏显示

function album() {
  let links = document.querySelectorAll('a');
  let imagesCollection = document.querySelectorAll('.img-prezentare');

  function displayImage(imgs, album) {
    imgs.forEach((image) => {
      if (image.dataset.album == album) {
        image.hidden = false;
      } else {
        image.hidden = true;
      }
    });
  }

  links.forEach((link) => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      switch (link.textContent) {
        case "album 1":
          displayImage(imagesCollection, 'album 1');
          break;
        // ... 其他相册逻辑
        case "all":
          imagesCollection.forEach((image) => {
            image.classList.remove('hide'); // 假设 hide 类设置 display: none
          });
          break;
      }
    });
  });
}
window.onload = function() {
  album()
};

<div class="row justify-content-evenly">
  <div class="col-md-4 center album1">
    <a href="adrbirouri.html"> <img class="img-prezentare" src="../ADR Birouri/View05.jpg" data-album="album 1"></a>
    <div class="text-poze"> ADR Birouri </div>
  </div>
  <!-- 更多类似的结构 -->
</div>

<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.no-cookie.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>

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

  // 使用事件委托监听导航容器的点击事件
  nav.addEventListener("click", e => {
    const tgt = e.target.closest("a"); // 找到被点击的最近的<a>标签
    if (tgt) { // 确保点击的是一个链接
      // 切换导航链接的激活状态
      links.forEach(lnk => lnk.classList.toggle("active", lnk === tgt));

      // 控制相册容器的显示/隐藏
      albums.forEach(album => {
        // 如果点击的是“all”链接，或者相册容器的ID与点击链接的data-album匹配，则显示
        // 否则隐藏
        album.hidden = ![album.id, "all"].includes(tgt.dataset.album);
      });
    }
  });
});

.selector a  {text-decoration: none } /* 移除默认下划线 */
.selector a.active  {text-decoration: underline } /* 激活状态显示下划线 */

.album img { height: 100px;} /* 统一图片高度 */