jQuery 更改/删除导航链接上的下划线

Question

我有一些代码可以根据单击的链接更改链接下方的边框，但是单击新链接后如何将其从旧链接中删除？

$(document).ready(function() {

  $('.nav-link').click(function() {
      $(this).addClass("active-link");
  });
  
});

nav {
    height: 3em;
    width: 100%;
    background-color: #000;
}

.nav-link {
    color: #fff;
}

.nav-link:hover {
    text-decoration: none;
    color: #fff;
}

.active-link {
    border-bottom: 0.2em solid #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<nav>
    <ul class="list-inline">
        <li><a href="#" class="nav-link active-link">Link One</a></li>
        <li><a href="#" class="nav-link">Link Two</a></li>
        <li><a href="#" class="nav-link">Link Three</a></li>
        <li><a href="#" class="nav-link">Link Four</a></li>
        <li><a href="#" class="nav-link">Link Five</a></li>
    </ul>
</nav>

Answer 1

只需从其余课程中删除该课程即可？

$(document).ready(function() {

  var links = $('.nav-link');

  links.click(function() {
      links.not(this).removeClass("active-link");
      $(this).addClass("active-link");
  });

});

Answer 2

使用.removeClass()

$(document).ready(function() {
  $('.nav-link').click(function() {
      $('.nav-link').removeClass("active-link");
      $(this).addClass("active-link");
  }); 
});

Answer 3

我猜你正在寻找

$(document).ready(function() {
  $('.nav-link').click(function() {
    $('.nav-link').removeClass("active-link");
    $(this).addClass("active-link");
  });
});