反应导航栏按钮，如何将其设置为有效

Question

当我访问其导航到的页面时，我希望我的侧边栏按钮能够更改颜色。

Answer 1

我以前遇到过这个问题，:active并没有太大帮助，因为一旦我单击页面的其他部分，它就会返回到原始CSS。

您应该做的是为所选的导航栏按钮创建一个类

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

然后在您的js中，创建一个条件，该条件将根据您当前的URL将.current_active_navbar应用于导航栏。您可以通过此window.location.href

获取当前的网址

所以，假设您当前的网址是localhost:3000/timer，那么您就可以满足以下条件

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

Answer 2

我自己对CSS不太满意，但是this在解释方面做得很好。