通过为导航项绑定点击事件，动态控制多个隐藏内容区块的显隐状态，确保每次仅显示与被点击项匹配的模块，避免页面跳转或闪烁问题。
在构建多级内容切换界面（如数学计算工具的分类导航）时，常见需求是：点击顶部菜单项（如“Matrix Calculations”），下方对应的内容区域（如矩阵子功能列表）显示，其余区域保持隐藏。原始代码中使用 标签触发点击，但因默认 href=”” 会触发页面重载或跳转，导致 .hidden 区块“闪现即逝”——这正是用户遇到的核心问题。
根本原因在于语义误用：将 作为纯交互控件，却未阻止其默认行为（event.preventDefault()），也未合理组织 DOM 结构，导致事件冒泡与页面刷新干扰状态切换。
✅ 推荐解决方案：语义清晰 + 行为可控
我们摒弃无意义的 ，改用语义化、无默认行为的
作为可点击项，并统一管理所有内容区块的显示逻辑：
1. html 结构优化（关键改进）
- 所有内容区块包裹在单一容器
中，便于批量操作；
- 每个 .link 元素的 class（如 first、second）与对应内容区块的 id（id=”first”、id=”second”）严格一致，建立映射关系；
- 移除所有空 href，彻底规避跳转风险。
Matrix Calculations
立即学习“Java免费学习笔记（深入）”；
Vector Calculations
Trigonometric Calculations
Integration&
DifferentiationMatrix Calculations
Vector Calculations
2. css 控制显隐状态
.hidden { display: none; } .show { display: block; } .link { cursor: pointer; padding: 8px 12px; user-select: none; } .link:hover { background-color: #f5f5f5; }3. javaScript 逻辑（简洁健壮）
document.addEventListener('DOMContentLoaded', () => { const links = document.querySelectorAll('.link'); const contents = Array.from(document.getElementById('sub-contents').children); links.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); // 冗余防护（虽已无 a 标签，仍建议保留） const targetId = this.classList[1]; // 获取 'first', 'second' 等标识 contents.forEach(el => { el.classlist.toggle('show', el.id === targetId); el.classList.toggle('hidden', el.id !== targetId); }); }); }); });? 关键点说明：使用 classList.toggle(className, condition) 精确控制每个区块的 show/hidden 状态；e.prEventDefault() 是防御性写法，即使未来混入 也能兼容；domContentLoaded 确保 DOM 加载完成后再绑定事件，避免查询失败。
⚠️ 注意事项
- ID 命名一致性：.link.first 必须对应 #first，大小写与连字符需完全一致；
- 避免重复类名冲突：原示例中部分
同时含 sub-cont 和 matrix，若后续 CSS 规则依赖组合类，请确保不意外影响主菜单样式；
- 无障碍增强（进阶）：可为 .link 添加 role=”button” 和 tabindex=”0″，支持键盘聚焦与回车触发。
此方案结构清晰、解耦性强，既解决了“闪退”问题，又为后续扩展（如添加淡入动画、记忆上次展开项）打下良好基础。