如何编写JS函数实现两张图片显隐切换并同步跳转链接功能

现有代码核心问题为DOM选择器不匹配：JS 中使用getElementById获取元素，但 HTML 里的两个图片容器仅设置了 class 属性，未添加对应 id 属性，导致切换逻辑无法触发。修复后即可实现点击切换图片显示状态、同步对应跳转链接的需求，完整修正代码如下：

代码示例 #

HTML 代码 #

<a href="[皮尔夫城堡入口图跳转地址]" target="_blank">
  <div id="PilafHQ" class="PilafHQ">
    <img src="Images/Pilaf Castle Entrance cropped.png" alt="Pilaf castle entrance" width="250" height="250">
  </div>
</a>
<a href="[Altaf 广告图跳转地址]" target="_blank">
  <div id="altafsung" class="altafsung">
    <img src="Images/Altaf Bazaar Advert.png" alt="Altaf Sunglasses" width="250" height="250">
  </div>
</a>
<img src="Images/walkingbear.gif" alt="行走的北极熊" onclick="revealHQ();">

CSS 代码 #

.altafsung {
  border-radius: 15px;
  overflow: hidden;
  perspective: 1px;
  position: absolute;
  right: 0%;
  display: block;
}

.PilafHQ {
  border-radius: 15px;
  overflow: hidden;
  perspective: 1px;
  position: absolute;
  right: 0%;
  display: none;
}

JavaScript 代码 #

function revealHQ() {
  var pilaf = document.getElementById('PilafHQ');
  var altaf = document.getElementById('altafsung');
  // 获取当前altaf元素的显示状态
  var displaySetting = altaf.style.display;
  if (displaySetting == 'block') {
    // altaf可见时隐藏，显示pilaf
    altaf.style.display = 'none';
    pilaf.style.display = 'block';
  } else {
    // altaf隐藏时显示，隐藏pilaf
    altaf.style.display = 'block';
    pilaf.style.display = 'none';
  }
}

如果需要进一步简化结构，也可以改为单个a标签承载跳转，切换图片的同时直接修改a标签的href属性，减少冗余DOM节点。

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