如何根據 URL 動態突出顯示活動選單項目？

根據頁面URL 動態突出顯示活動選單項目

開發網站時的常見任務之一是突出顯示當前活動的選單項目基於正在查看的頁面的URL。這增強了使用者導航，並為使用者在網站層次結構中的當前位置提供了視覺提示。

解決方案實作

JavaScript 通常用於動態實作此行為。然而，使用事件驅動方法（例如，按一下選單項目）時會出現常見的陷阱，這些方法無法準確反映頁面載入過程。

要有效地將「活動」類別新增至適當的選單項目頁面載入時，請考慮以下方法：

說明

在此程式碼中snippet:

• $(function(){...})確保頁面完全載入後程式碼執行。
• var current = location.pathname; 擷取目前URL path.
• $('#nav li a').each(function(){. ..}) 迭代#nav 元素中的所有選單項目（錨標記）。
• var $this = $(this); 儲存目前選單項目processed.
• if($this.attr('href').indexOf( current) !== -1){...} 檢查目前URL 路徑是否包含href選單項目的屬性，表示它是活動頁面。
• $this.addClass('active'); 新增「active」類別到適當的選單項目。

這種方法在頁面載入時準確地突出顯示活動選單項，確保一致且使用者友好的導航體驗。

以上是如何根據 URL 動態突出顯示活動選單項目？的詳細內容。更多資訊請關注PHP中文網其他相關文章！