How to unbold other links when other links are active?

I’m trying to make the clicked link bold, but it should remove the bold from that link when I click on other links. I’ve tried the code below, which does make the link bold when I click on one, but the previously clicked links stay bold after I’ve clicked on other links.

How can I remove the bold from the previously clicked links when a new link is clicked?

<a href="#">link A</a>
<a href="#">link B</a>
<a href="#">link C</a>
<a href="#">link D</a>
$(document).ready(function(){
  $("a").click(function(){
      $(this).css("font-weight","bold");
  });
});

solution

I’d suggest toggling a class instead.

Basically, it removes the class active from all the sibling elements, then uses the .end() method to select the initial element and add the class active:

$("a").click(function() {
  $(this).siblings().removeClass('active').end().addClass('active');
});
.active {
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">link A</a>
<a href="#">link B</a>
<a href="#">link C</a>
<a href="#">link D</a>