如何使用javascript创建互斥的突出显示链接？

所以我试过这个：

$(function() {  
  return $("a[data-sir-id]").click(function() {
    var data_sir_id;
    data_sir_id = $(this).data("sir-id");
    $("a[data-sir-id='" + data_sir_id + "']").addClass("underline");
  });
});

但是我想让下划线一直保留，直到单击另一个数据sir id

我试图

.removeClass

，但不知道放在哪里

此外，我希望下划线是相互排斥的，即只有一个链接（最后一个被点击）应加下划线

---

我怎样才能做到这一点呢？

不需要在代码中返回。这是错误的。此外，当您当前在该元素上时，也没有理由查找id

$(function() {  
  $("a[data-sir-id]").click(function() {
    $(".underline").removeClass("underline");  //remove the class from any element that has it
    $(this).addClass("underline");  //add a class to the currently clicked link
  });
});

---

下面是一些非常快的事情：

$(function() {  
  $("a[data-sir-id]").click(function(e) {
      $("a[data-sir-id]").removeClass("underline");
      $(this).addClass("underline");
      e.preventDefault();
  });
});

---

jsiddle演示：

感谢@epascarello的清晰解释。我现在明白了它的作用，但为什么它在第一次点击时不起作用（当页面第一次显示或刷新时）？它在第一次点击时仍然不起作用吗？应该没问题。您是否以不同的方式添加代码？