JavaScript菜单切换内容实现方法

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

<!-- 主菜单区（无链接，仅触发） -->
<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>
      <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); }
}

⚠️ 关键注意事项