单击后并在徽标下保留导航下划线

Question

看看这个js小提琴

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

当用户单击链接时，该链接一直保持到他们单击屏幕的另一部分，然后消失。

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

左侧导航栏上还有一个按钮，它是指向主页的链接。 但是，尽管有我的尝试，但下划线功能不适用于此功能。 有任何想法吗？

.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

<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>

Answer 1

如果您希望悬停状态在点击链接后仍然存在，只需使用jQuery（您也可以使用本机JS，但是由于Bootstrap需要jQuery，我们可以简单地使用它）将click事件监听器绑定到：

• 导航中的<a>元素，以便向链接添加一个类，例如active ，并防止click事件冒泡到文档中
• DOM中的文档对象，以便从导航链接中删除所有active类

您的JS逻辑如下所示：

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

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

如果你也想确保只有一个单一的元素保持这种活跃状态，你将不得不删除您的第一个click事件处理程序，即从其他锚元素的类：

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

最重要的是，只需在列表中添加一个新的a.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);
}

请参阅概念验证示例：

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

 .navbar-brand img { height: 33px; width: auto; } .navbar { line-height: 33px; } .footer { padding: 25px; } 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, .navbar-dark .navbar-nav>li>a.active { 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); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> <nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark"> <a class="navbar-brand" routerLink="/" routerLinkActive="active"> <img class="vp-image" src="http://via.placeholder.com/200x30" alt="Dev" /> </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">Services</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="/case-studies" routerLinkActive="active">Case Studies</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>