如何根據訪問的頁面在導航欄中添加下划線？

Question

我希望導航欄在當前訪問的頁面下划線，就像下圖一樣-

Answer 1

我發現對我有用的一種方法是使用location.pathname檢查頁面的當前路徑 url 並將其與您想要命名的任何內容進行比較，然后將適當的 class 應用於它。

這是一些示例代碼：

const pathMap = {
  '/': document.getElementById('home_nav'),
  '/about': document.getElementById('about_nav'),
  '/contact': document.getElementById('contact_nav'),
  '/projects': document.getElementById('projects_nav'),
};

const path = location.pathname;

if (pathMap[path]) {
  pathMap[path].classList.add('active');
}

您必須將此代碼添加到導航欄所在的位置。 請記住，可能有更好的方法來執行此操作，但如果您只在導航欄存在的地方運行此代碼，那么應該沒有問題。 另一個缺點是這種方式不支持嵌套路徑，所以假設你在/projects/cat-hotel那么它就不能正常工作，當然你可以做一些 RegEx 來解決這個問題，但我只是給你看一個例子。

Answer 2

我已經使用了這兩種解決方案，它們對我來說效果很好。

https://css-tricks.com/forums/topic/how-to-keep-the-page-highlighted-on-the-nav-bar/

https://css-tricks.com/forums/topic/highlight-nav-links-when-scrolling-the-page/