在不使用 jQuery 的情況下突出顯示活動錨鏈接

Question

我正在構建一個網站，它只有一個頁面，但有不同的部分，例如主頁、關於、聯系人等。我正在使用錨標簽來滾動頁面的不同部分。 我在頁面頂部有一個固定的導航菜單，我想在導航鏈接中指出當前哪個部分處於活動狀態。

我目前正在學習 JavaScript，所以我不知道該怎么做。 我也想避免使用 jQuery。

Answer 1

我會為此使用hashchange 事件。 每當它觸發時，通過添加/刪除 class 來更新您的導航。 在以下示例中，class 被稱為“活動”。

 window.addEventListener("hashchange", updateActiveNavigationEntry); function updateActiveNavigationEntry () { // query currently active item const currentActiveItem = document.querySelector('#navigation a.active'); // remove active class if (currentActiveItem) currentActiveItem.classList.remove("active"); // query new active item const newActiveItem = document.querySelector('#navigation a[href="'+ window.location.hash +'"]'); // add active class to new entry if (newActiveItem) newActiveItem.classList.add("active"); }

 .active { background: red; }

 <div id="navigation"> <a href="#section01">section01</a> <a href="#section02">section02</a> <a href="#section03">section03</a> </div>