如何使用 Javascript/JQuery 修复我的 CSS 链接属性 onClick？

Question

我试图在单击链接后更改链接的颜色，然后在单击另一个链接时将其设置回其原始颜色。为此，我想设置一个“活动”类，然后在单击另一个链接时将其删除。

如何修复我的代码以使其正常运行？

$(function() {
  var links = $('a.link').click(function() {
    links.removeClass('active');
    $(this).addClass('active');
  });
});

a.link.active {
  background-color: #000033;
  color: #FFFFCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li>Hyper Links</li>
  <li>
    <a href="#" class="link">Link</a>
  </li>
  <li>
    <a href="#" class="link">Link</a>
  </li>
  <li>
    <a href="#" class="link">Link</a>
  </li>
  <li>
    <a href="#" class="link">Link</a>
    <li>
      <a href="#" class="link">Link</a>
    </li>
</ul>

Answer 1

试试这个：

enter code here
<script>
      $(function() {
               var links = $('a.link');
               $(document).on('click','a.link',function(e){
                     links.removeClass('active');
                     $(this).addClass('active');
            })
     });
</script>