jquery - 删除 :focus on :active

Question

我正在寻找一种方法来移除元素的 :focus 当它变为 :active 时。

我有一个导航栏，当用户滚动时，它会在 3 个 anchor 之间切换，触发 anchor 的 :active。

当用户单击 anchor 时，浏览器会将滚动平滑地过渡到 anchor 的引用。问题是用户滚动后焦点仍然存在。这意味着我可能在 :focus 中有一个 anchor ，在 :active 中有一个 anchor 。

我的意图是在 :active 命中元素时移除 :focus。

我在 Google 上找不到任何关于此问题的信息，人们问的大多数问题是如何删除元素的大纲。

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
  color: #333;
  background-color: black;
}
.navbar-nav>.active>a {
  background-color: white;
  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.navbar-nav>li>a {
  color: #000000 !important;
}
#navbar {
  margin: 12px 0;
}
.navbar-default .navbar-toggle {
  border-color: #ddd;
}
.navbar-toggle {
  position: relative;
  float: right;
  padding: 9vw 10vw margin-top: 8vw;
  margin-right: 15vw;
  margin-bottom: 8vw;
  background-color: transparent;
  background-image: none;
  border: 1vw solid transparent;
  border-radius: 4vw;
}
.navbar-default .navbar-collapse {
  border-color: #e7e7e7;
}
.nav>li {
  height: 100%;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.nav>li>a:focus,
.nav>li>a:hover {
  text-decoration: none;
  color: #722872;
  background-color: #FFFFFF;
}
.nav>li a:hover {
  color: #722872;
  background: #FFFFFF;
  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

<nav id="navbar" class="collapse navbar-collapse">
  <div class="navbar-header">

    <button type="button" data-toggle="collapse" data-target="#navBar-target" class="navbar-toggle">
      <span class="icon-bar"> </span>
      <span class="icon-bar"> </span>
      <span class="icon-bar"> </span>
    </button>
  </div>
  <div class="collapse navbar-collapse" id="navBar-target">
    <ul class="nav navbar-nav navbar-right">
      <li>
        <a href="#top"> About </a>
      </li>
      <li>
        <a href="#portfolio"> Portfolio </a>
      </li>
      <li class>
        <a href="#contact"> Contact </a>
      </li>
    </ul>
  </div>
</nav>

Answer 1

在我的例子中，这是通过添加这个简单的 jQuery 片段来处理的:

$('.nav li a').click(function() {
  $(this).blur();
});

这允许我覆盖 :hover 并且当 anchor 被点击时，上面的片段被触发，使点击“透明”同时允许 :active(滚动)在它上面。