反應導航欄按鈕，如何設置活動

Question

我希望我的側邊欄按鈕在訪問其導航的頁面時更改顏色。

Answer 1

我之前遇到過這個問題， :active並沒有太大幫助，因為一旦我單擊頁面的其他部分，它就會返回其原始CSS。

您應該做的是為所選的導航欄按鈕創建一個類

.current_active_navbar {
   background-color: $main-red;
}

然后在您的js中，創建一個條件，該條件將根據當前URL將.current_active_navbar應用於導航欄。 您可以通過此window.location.href獲取當前URL。

因此，假設您當前的網址是localhost:3000/timer那么您可以像這樣設置條件

if(window.location.href.split("/")[3] === "timer")

Answer 2

我不是用CSS自己太優秀了，但這個做了解釋它的一個不錯的工作。