做網(wǎng)站時，很多人只顧著把菜單列出來，點不點都一個樣。結果用戶打開首頁，再點進“關于我們”，發(fā)現(xiàn)頂部菜單毫無變化——根本不知道自己現(xiàn)在在哪個頁面。這體驗就像走進一棟大樓，每層樓的標識都一模一樣，誰能不迷糊？

為什么要點亮當前菜單項

點亮當前菜單，其實就是給用戶一個視覺提示。比如你點了“產(chǎn)品中心”，那一欄就變個顏色、加個下劃線，或者背景加深，讓人一看就知道“哦，我現(xiàn)在在這兒呢”。這種小細節(jié)，能大大減少用戶的認知負擔。

實現(xiàn)方式其實很簡單

大多數(shù)情況下，只需要一點 HTML 和 CSS 就能搞定。假設你的導航結構是這樣的：

<nav>
  <ul>
    <li><a href="/" class="active">首頁</a></li>
    <li><a href="/products">產(chǎn)品中心</a></li>
    <li><a href="/about">關于我們</a></li>
  </ul>
</nav>

注意第一個 a 標簽上有個 class="active"。這個類名就是關鍵。然后寫一段 CSS 來定義它的樣式：

.nav a.active {
  background-color: #007cba;
  color: white;
  font-weight: bold;
}

每次切換頁面時，只要在對應菜單項加上 active 類，就能自動高亮。靜態(tài)網(wǎng)站可以手動加，動態(tài)網(wǎng)站（比如用 PHP 或 Node.js）可以通過判斷當前 URL 自動添加。

動態(tài)頁面怎么自動高亮

比如用 JavaScript 判斷當前路徑，然后自動給匹配的鏈接加類：

document.addEventListener('DOMContentLoaded', function() {
  const currentPath = window.location.pathname;
  const navLinks = document.querySelectorAll('nav a');

  navLinks.forEach(link => {
    if (link.getAttribute('href') === currentPath) {
      link.classList.add('active');
    }
  });
});

這樣不管用戶從哪個頁面進來，對應的菜單都會自動亮起來，不用每個頁面單獨處理。

別忘了移動端體驗

有些人在電腦上看沒問題，但手機點開菜單后，高亮效果沒了。原因往往是移動端用了不同的導航結構，或者 JS 沒加載全。記得在小屏幕上也測試一遍，確保手指滑到哪、亮點就跟到哪。

一個會“說話”的導航，比一堆整齊但死板的鏈接強得多?；ㄊ昼娂由细吡粒赡芫妥屧L客多留三十秒。