在nav-item上删除活动类

Question

当我在引导程序4导航项上删除.active类时，为什么以下CSS规则仍保持活动状态？

.navbar-light .navbar-nav .active>.nav-link, 
.navbar-light .navbar-nav .nav-link.active, 
.navbar-light .navbar-nav .nav-link.show, 
.navbar-light .navbar-nav .show>.nav-link {
    color: rgba(0,0,0,.7);
}

这是我的例子：

$("a").click(function() {
  var $this = $(this);
  var isActive = $this.hasClass('active');
  $("a").removeClass("active");
  isActive ? $this.removeClass("active") : $this.addClass("active");
});

nav a {
  display: block;
}

nav a.active {
  background: lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <a href="#">FooBar</a>
  <a href="#">FooBar</a>
  <a href="#">FooBar</a>
</nav>

View on JSFiddle