特定页面上的活动边框CSS/HTML

因此，我正在制作一个边框按钮，当您在该页面上时，该按钮处于活动状态。但当您按下第二个边框按钮时，第一个边框将被删除，第二个边框将可见。这和这个网站上的基本上是一样的。“问题、作业、文档测试版、标签”按钮。当您在该页面上时，其中一个亮起，另一个关闭。我试着在谷歌上查找，但找不到。我试着通过谷歌浏览器“检查元素”来查看代码

需要一点CSS和HTML。如果希望结果元素在不更改页面的情况下“可激活”，那么还需要一些JS

$（'button'）。在（'click'，function（）上{
$（'button'）。removeClass（'active'）；
$（this.addClass（'active'）；
});
button.active{
背景：蓝色；
}

活动页
非活动页面
我能想到的最简单的方法是，在要在该页面上点亮的按钮上添加一个“活动”类。
确保每个页面上都有完全相同的HTML。然后，在每个页面中，通过仅为相应按钮分配“活动”类，对相应按钮进行不同的样式设置。例如：

在主页上

<a class="button active" href="index.html">Home</a>
<a class="button" href="about.html">About</a>

你试过什么了吗？你有密码吗？
<a class="button" href="index.html">Home</a>
<a class="button active" href="about.html">About</a>

.button {
background-color: grey;
}

.active {
background-color: orange;
}