Удалить активный класс на nav-элементе

Question

Когда я удаляю класс .active на nav-элементе начальной загрузки 4, почему следующее правило 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>

Посмотреть на JSFiddle