锚点跳转功能失效及页面内容异常显示问题求助

• 修正锚点链接格式：你的链接指向了外部图片地址，这是错误的。正确的锚点链接应该指向页面内目标元素的id，格式如下：

  <a href="#target-area">跳转到目标区域</a>
  <!-- 对应目标区域 -->
  <div id="target-area">这里是要跳转的内容</div>
  

• 确保目标元素id唯一：页面中不能有重复的id属性，否则浏览器无法定位正确的跳转目标。
• 检查JS事件拦截：如果链接绑定了点击事件，确认没有调用event.preventDefault()或返回false，这类操作会阻止锚点的默认跳转行为。

• 初始隐藏目标内容：给需要触发显示的内容添加默认隐藏的CSS样式：

  .toggle-content {
    display: none;
  }
  

• 绑定按钮点击触发逻辑：通过JavaScript给home/destination按钮添加点击事件，控制内容显示：

  const homeBtn = document.querySelector('#home-button');
  const destBtn = document.querySelector('#destination-button');
  const targetContent = document.querySelector('.toggle-content');
  
  homeBtn.addEventListener('click', () => {
    targetContent.style.display = 'block';
  });
  destBtn.addEventListener('click', () => {
    targetContent.style.display = 'block';
  });
  

• 排查强制显示的代码：检查是否有其他CSS规则强制设置内容为display: block，或者页面加载时自动执行了显示内容的JS逻辑。

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