本文介绍一种简洁可靠的 javascript 方案，通过为菜单项和内容区块建立类名/id 映射关系，实现单击切换显示指定内容、自动隐藏其他内容的效果，彻底解决因 `` 标签默认跳转导致的“闪退”问题。

在构建多级导航或分类内容展示页面时，常需实现“点击标题 → 展开对应内容区块”的交互效果。原始代码中使用 包裹可点击区域，虽语义上看似合理，但其默认行为会触发页面跳转（即使 href=""），导致目标 .hidden 元素短暂显示后立即刷新或重置，造成“一闪而逝”的问题。

根本解法是：移除 标签，改用语义更清晰、无默认行为的

或 作为触发器，并通过 CSS 类控制显隐。以下是推荐的完整实现方案：

✅ 推荐结构（语义清晰 + 行为可控）

<!-- 主菜单区（无链接，仅触发） -->
<div class="main-cont">
  <div class="link first"><p>Matrix Calculations</p></div>
  <div class="link second"><p>Vector Calculations</p></div>
  <div class="link third"><p><span>Trigonometric</span> Calculations</p></div>
  <div class="link fourth"><p>Integration &<br>Differentiation</p></div>
</div>

<!-- 所有内容区块统一包裹在容器中，便于批量操作 -->
<div id="sub-contents">
  <div class="hidden" id="first">
    <h2>Matrix Calculations</h2>
    <div class="main-cont">
      <div class="sub-cont matrix"><p>Basic <br>Calculations</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10721" title="China SEO Baidu"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20cf0281539.jpg" alt="China SEO Baidu" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill10721" title="China SEO Baidu" class="overflowclass">China SEO Baidu</a>
													<p class="overflowclass">针对百度搜索引擎优化网站（百度SEO），教授AI智能体如何实施百度专属SEO技术，包括百度站长工具设置、ICP备案等</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill10721" title="China SEO Baidu" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div></div>
      <div class="sub-cont matrix"><p>Determinant<br>of matrix</p></div>
      <div class="sub-cont third matrix"><p><span>Inverse &</span><br>Transposition</p></div>
      <div class="sub-cont matrix"><p>Eigen values &<br>Vectors</p></div>
    </div>
  </div>

  <div class="hidden" id="second">
    <h2>Vector Calculations</h2>
    <!-- 同理省略其余子项 -->
  </div>

  <div class="hidden" id="third">
    <h2>Trigonometric Calculations</h2>
  </div>

  <div class="hidden" id="fourth">
    <h2>Calculus Calculations</h2>
  </div>
</div>

✅ 核心 JavaScript（简洁高效）

// 获取所有触发元素与内容容器
const triggers = document.querySelectorAll('.link');
const contentSections = Array.from(document.getElementById('sub-contents').children);

triggers.forEach(trigger => {
  trigger.addEventListener('click', function() {
    const targetId = this.classList[1]; // 如 'first', 'second'...

    // 遍历所有内容区块：仅显示匹配 ID 的，其余隐藏
    contentSections.forEach(section => {
      section.classList.toggle('show', section.id === targetId);
    });
  });
});

✅ 必备 CSS（控制显隐与交互反馈）

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

.link {
  cursor: pointer;
  padding: 8px 12px;
  user-select: none;
}

.link:hover {
  background-color: #f5f5f5;
  border-radius: 4px;
}

/* 可选：添加平滑过渡 */
.hidden.show {
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

⚠️ 关键注意事项

• 禁止使用 作为纯触发器：若必须保留链接语义（如 SEO 或无障碍需求），请添加 event.preventDefault()，但推荐优先使用

或语义化

。

ID 与 class 名严格一致：确保 .link.first 对应 #first，这是映射逻辑的基础。

初始状态需统一：所有 .hidden 元素默认不显示，首次点击才激活；可通过 JS 初始化显示首个区块（如 document.getElementById('first').classList.add('show')）。

可访问性增强：为 .link 添加 role="button" 和 tabindex="0"，并监听 Enter/Space 键事件，提升键盘用户支持。

该方案轻量、可维护性强，且完全规避了表单提交或页面跳转干扰，是现代前端中实现内容切换的推荐实践。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南