Question

我正在寻找一种方法来删除一个元素：焦点变为：活跃。

我有一个导航栏，当用户滚动时切换3个锚点，触发锚点：激活。

当用户点击锚点时，浏览器会平滑地将滚动转换为锚点的引用。问题是用户滚动后焦点仍然存在。这意味着我可能有一个锚点：焦点和一个锚点：活动。

我的意图是：将焦点移除，因为：active命中元素。

我无法在Google上找到有关此问题的任何内容，人们提出的大多数问题都是如何删除outline项。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

在我的情况下，这是通过添加这个简单的jQuery片段来处理的：

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

这允许我覆盖：hover，当点击锚点时，上面的片段会被触发，点击'透明'，同时允许：active（滚动）在它上面。

删除：关注：有效

1 个答案: