JavaScript实现点击切换显示隐藏Div的问题求助（解决闪显消失）

问题原因 #

核心问题是**<a>标签的默认跳转行为**：你设置了空的href=""，点击时浏览器会触发页面刷新（相当于重新加载当前页面），刚通过JS显示的隐藏div会因为页面重置回到初始的display:none状态，所以看起来只闪了一下就消失。

解决方案 #

以下是几种可行的解决方式，按需选择：

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

在点击事件中添加event.preventDefault()，直接禁用浏览器的默认跳转动作：

// 获取主容器下的所有触发链接
const triggerLinks = document.querySelectorAll('.main-cont a');
// 获取所有需要切换的隐藏div
const targetDivs = document.querySelectorAll('.hidden');

triggerLinks.forEach((link, index) => {
  link.addEventListener('click', (e) => {
    // 阻止a标签的默认跳转行为
    e.preventDefault();
    // 先隐藏所有目标div
    targetDivs.forEach(div => div.style.display = 'none');
    // 显示对应索引的目标div
    targetDivs[index].style.display = 'block';
  });
});

方法2：修改<a>标签的href属性 #

把空的href=""替换为href="javascript:void(0)"，直接禁用跳转：

<!-- 示例修改第一个触发链接 -->
<a href="javascript:void(0)"><div class="sub-cont first"><p>Matrix Calculations</p></div></a>

之后直接使用你的原有JS逻辑控制显示隐藏即可，无需额外处理默认行为。

方法3：替换<a>标签为非链接元素 #

如果这些元素不需要承担链接功能，直接把<a>换成<div>，彻底避免跳转问题：

<div class="sub-cont first"><p>Matrix Calculations</p></div>

再给这些div绑定点击事件即可。

额外优化建议 #

可以用CSS类控制显示/隐藏，比直接操作style.display更易维护：

.hidden {
  display: none;
}
.hidden.active {
  display: block;
}

对应的JS修改为：

triggerLinks.forEach((link, index) => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    targetDivs.forEach(div => div.classList.remove('active'));
    targetDivs[index].classList.add('active');
  });
});

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