jQuery change/remove 导航上的下划线 link

Question

我有一些代码可以根据点击的对象更改 link 下方的边框，但是如何在新的 link 被点击后将其从旧的 link 中删除点击了吗？

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

只需从其余部分中删除 class 吗？

$(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");

      });

    });

jQuery change/remove 导航上的下划线 link

jQuery change/remove underline on navigation link

javascript

jquery