在新选项卡中打开链接后在选定的 navitem 下划线

Question

我有一个导航栏，所选/活动的 navitem 可以通过橙色下划线识别。但是，当我在新选项卡中打开另一个 navitem（通过右键单击）时，默认的 navitem 带有下划线，而不是所选的 navitem！

这是我的导航栏：

<div>
  <ul>
    <a routerLink="/home">
      <button class="active" data-bs-toggle="tab">
        Home
      </button>
    </a>
    <a routerLink="/newTab">
      <button data-bs-toggle="tab">
        New Tab
      </button>
    </a>
  </ul>
<div>

和.scss：

.active {
    border-bottom-color: #f48024!important;    
}

我知道

home

选项卡默认具有

active

类，但是是否有办法捕获上一个选项卡中选择的选项卡？

提前谢谢您。

Answer 1

请勿使用

class="active"

而是将其绑定到初始化期间读取的变量。 您可以使用

读取路径

window.location.href