javascript - 两个按钮/链接，单击一次然后更改颜色，直到单击另一个按钮。单击另一个时，对那个做同样的事情

Question

我希望他们是这样的。 单击一个，然后将该文本的颜色更改为绿色，直到单击另一个。当另一个点击时，点击的那个变成绿色，点击一次又回到以前的颜色。我用 css 尝试过，但它只喜欢 active 一个。有人可以帮帮我吗

<div id="Space">
  <ul>
    <li role="presentation" class="sort">
      <a class="link" href="/?sort=score&page=1" style="text-decoration:none;">link1</a>
    </li>
    <li role="presentation" class="date">
      <a class="link" href="/?sort=date&page=1"  style="text-decoration:none;">link2</a>
    </li>
  </ul>
</div>

Answer 1

HTML代码:

<div id="Space">
<ul>
    <li role="presentation" class="sort">
      <a class="link1" href="/?sort=score&page=1" style="text-decoration:none;">link1</a>
    </li>
    <li role="presentation" class="date">
      <a class="link2" href="/?sort=date&page=2"  style="text-decoration:none;">link2</a>
    </li>
    <li role="presentation" class="date">
      <a class="link3" href="/?sort=date&page=3"  style="text-decoration:none;">link3</a>
    </li>
  </ul>
</div>

J查询代码:

//on page load
var ul_li_a = $("ul>li>a");
var lastClickTag = localStorage.getItem("last_clicked");

ul_li_a.css("color", "black");
if(lastClickTag){
  $("."+lastClickTag).css("color", "green")
}



$('ul>li').on("click", function(){      
  ul_li_a.css("color", "black");
  $(this).children("a").css("color", "green"); 
  localStorage.setItem("last_clicked", $(this).children("a").attr("class"));  
});

请在此处检查测试代码:https://jsfiddle.net/kkm37zgd/2/