Javascript 导航下划线单击后在徽标下保持

当用户将鼠标悬停在链接上时，我已成功地将下划线添加到导航中

当用户点击一个链接时，它会一直停留，直到他们点击屏幕的另一部分，然后它就会消失

只要用户在页面上，我如何让它保持下划线

左侧导航上还有一个按钮，它是主页的链接。然而，尽管我做了尝试，下划线功能并不适用于此。有什么想法吗

.navbar-brand img {
  height:33px;
  width: auto;
}

.navbar {
  line-height: 33px;
}

button {
    background-color:rgb(255, 102, 0);;
}
.navbar-dark .navbar-nav > li > a {
    border-bottom: 1px solid transparent;
}

.navbar-dark .navbar-nav > li > a:hover, .navbar-dark .navbar-nav > li > a:focus, .navbar-dark .navbar-nav > .active > a, .navbar-dark .navbar-nav > .active > a:hover, .navbar-dark .navbar-nav > .active > a:focus {
    color: rgb(255, 102, 0);;
    border-bottom: 1px solid rgb(255, 102, 0);
}

.navbar-dark .navbar-nav > button.home:hover, .navbar-dark .navbar-nav >  button.home:focus, .navbar-dark .navbar-nav > .active > button.home, .navbar-dark .navbar-nav > .active > a:hover, .navbar-dark .navbar-nav > .active > a:focus {
    color: rgb(255, 102, 0);
    border-bottom: 1px solid rgb(255, 102, 0);
}

HTML

---

如果您希望在单击链接后保持悬停状态，只需使用jQuery，您也可以使用本机JS，但由于引导需要jQuery，我们可以简单地使用它将单击事件侦听器绑定到：

这个 服务 案例研究 关于 博客 联系

---

你需要在这里发布一个完整的问题标记示例，而不是一个可以改变或消失的第三方网站，在将来对任何人都没有帮助：马上就知道了……谢谢@Terry的输入。remove类似乎不起作用。关于如何使下划线应用于左侧按钮的任何输入？@RyeGuy您认为它似乎不起作用是什么意思？您的代码段在单击时保持下划线，但在您在safari中单击另一个按钮后不会删除上一条下划线browser@RyeGuy好吧，你的问题不清楚。更新了我的答案。

<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
  <a class="navbar-brand" routerLink="/" routerLinkActive="active">
    <img src="https://via.placeholder.com/200x30" alt="" />
  </a>
  <button class="navbar-toggler home" (click)="isCollapsed = !isCollapsed" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarsExampleDefault" [collapse]="isCollapsed">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" routerLink="/services" routerLinkActive="active">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/case-studies" routerLinkActive="active">Testimonials</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/about" routerLinkActive="active">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/blog" routerLinkActive="active">Blog</a>
      </li>
    </ul>
    <div class="form-inline my-2 my-lg-0">
       <a class="nav-link button" routerLink="/intouch" routerLinkActive="active"><button class="btn btn-outline-primary my-2 my-sm-0">Contact</button></a>
    </div>
  </div>
</nav>

$('.navbar-nav a').click(function(e) {
    e.stopPropagation();
    $(this).addClass('active');
});

$(document).click(function() {
    $('.navbar-nav a').removeClass('active');
});

$('.navbar-nav a').click(function(e) {
    e.stopPropagation();
    $('.navbar-nav a').removeClass('active');
    $(this).addClass('active');
});

.navbar-dark .navbar-nav > li > a:hover,
.navbar-dark .navbar-nav > li > a:focus,
.navbar-dark .navbar-nav > .active > a,
.navbar-dark .navbar-nav > .active > a:hover,
.navbar-dark .navbar-nav > .active > a:focus,
.navbar-dark .navbar-nav > li > a.active {
    color: rgb(255, 102, 0);;
    border-bottom: 1px solid rgb(255, 102, 0);
}