javascript - 当其他链接处于事件状态时如何取消其他链接的粗体？

Question

我正在尝试将单击的链接设置为粗体，但当我单击其他链接时，它应该从该链接中删除粗体。我尝试了下面的代码，当我单击一个链接时，该代码确实使链接变为粗体，但在我单击其他链接后，之前单击的链接仍保持粗体。

当单击新链接时，如何删除先前单击的链接中的粗体？

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

Answer 1

我建议改为切换一个类。

基本上，它从所有同级元素中删除 active 类，然后使用 .end() 方法选择初始元素并添加 类事件:

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