jQuery change/remove underline on navigation link

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

     }); 

    });