javascript - 单击后在 Logo 下方保留导航下划线

Question

Check out this js fiddle

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

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

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

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

.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 我们可以简单地使用它)将点击事件监听器绑定(bind)到:

• <a>导航中的元素，以便它添加一个类，比如 active , 到链接，并防止点击事件冒泡到文档
• DOM 中的文档对象，以便它删除所有 active从您的导航链接上课

你的 JS 逻辑看起来像这样:

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

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

如果您还想确保只有一个单个元素保持此事件状态，您将必须在您的第一个点击事件处理程序中从其他 anchor 元素中删除该类，即:

$('.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>