点击按钮后隐藏文本短暂显示随即消失的问题排查与修复方法

嘿，这个问题我太熟悉了！你遇到的核心问题是**<a>标签的默认跳转行为**——你的contactButton是一个<a>标签，而且设置了href=""，点击它的时候浏览器会默认执行跳转（哪怕是空链接，也会刷新当前页面），这就导致弹窗刚通过JS显示出来，页面一刷新又回到了初始的隐藏状态。

下面给你两种简单的修复方案：

方案1：阻止<a>标签的默认行为 #

只需要在你的showPopUp函数里添加一行代码，阻止浏览器的默认跳转动作：

修改后的JavaScript代码：

const contactPopUp = document.getElementById("contactButton");
const exitButton = document.getElementById("exit");
function showPopUp(event) {
  // 关键：阻止a标签的默认跳转行为
  event.preventDefault();
  // 优化：不用覆盖所有样式，只修改display即可（因为CSS里已经定义了其他样式）
  document.getElementById("contacts").style.display = "block";
}
function closePopUp() {
  document.getElementById("contacts").style.display = "none";
}
contactPopUp.addEventListener("click", showPopUp);
exitButton.addEventListener("click", closePopUp);

这里顺便帮你优化了代码：不用style.cssText覆盖所有样式，因为你已经在CSS里写好了#contacts的位置、背景等样式，JS只需要控制display属性就够了，这样代码更易维护。

方案2：把<a>标签换成<button>标签 #

既然这个元素是用来触发弹窗的按钮，而不是跳转链接，直接用<button>标签更语义化，也不会有默认跳转的问题：

修改后的HTML代码片段：

<li><button id="contactButton">Contacts</button></li>

如果想要按钮看起来和原来的<a>标签样式一致，可以给按钮加一点CSS：

#contactButton {
  background: none;
  border: none;
  color: blue; /* 或者和你的链接文字颜色一致 */
  text-decoration: underline;
  cursor: pointer;
}

两种方案都能解决你的问题，选哪种看你的需求啦～

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