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

我希望他们像这样。 单击一个，然后将该文本的颜色更改为绿色，直到单击另一个。当另一个单击时，单击的一个变为绿色，单击后一个变回上一个颜色。我尝试了css，但它只喜欢活动的一个。谁能帮帮我吗

<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>

我想应该这样

我认为这应该是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>

请检查此处的测试代码：

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>

---

请检查此处的测试代码：

发布一个工作片段

$（函数（）{
$（'li[role=“presentation”]”）。在（'click'，function（）上{
$（this）.closest（'ul'）.find（'.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
});
.activea{
颜色：绿色；
}
a{
字体颜色：黑色；
字体大小：24px；
}







发布工作片段


$（函数（）{
$（'li[role=“presentation”]”）。在（'click'，function（）上{
$（this）.closest（'ul'）.find（'.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
});
.activea{
颜色：绿色；
}
a{
字体颜色：黑色；
字体大小：24px；
}







请展示您迄今为止的尝试。
$（'a.link'）。关于（'click'，函数（e）{e.pre……。}）
？@winixxee我已经发布了一个答案，请让我知道它是否有助于展示您迄今为止的尝试。
$（'a.link'）。关于（'click'，函数（e）{e.pre……。}）
？@winixxee我已经发布了一个答案，请让我知道它是否有帮助谢谢你，但它在$（.link）处显示意外标记。css（{“color”：“red”}）我忘记了双引号，请尝试$（.link”）.css（{“color”：“red”}）是的，它做了我尝试过的事情，当我点击链接时，它会一直工作直到刷新。当它完成加载并刷新后，颜色会停留在它应该停留的地方，但它在$（.link）处显示意外标记。css（{“color”：“red”}）我忘记了双引号try$（“.link”）.css（{“color”：“red”）是的，它做了我尝试过的事情，当我点击链接时，它会一直工作到刷新为止。当它完成加载并刷新时，颜色会停留在它应该停留的位置，但这会杀死标记的能力。当我点击链接时，它不会带我去那个链接。也许我误解了你真正想要的。请再解释一点。一旦你点击链接，接下来会发生什么？很抱歉，可能是我的错，没有把上下文弄清楚，我正试图让它像这个网站；一旦我单击“跟随”或“新建”，它会更改该链接的背景并保持不变，直到我单击其他链接。这意味着你想这样做，看看该链接是否已被单击/访问？我更新了答案和测试代码的链接。请检查它。谢谢，但这会破坏标记的功能。当我点击链接时，它不会带我去那个链接。也许我误解了你真正想要的。请再解释一点。一旦你点击链接，接下来会发生什么？很抱歉，可能是我的错，没有把上下文弄清楚，我正试图让它像这个网站；一旦我单击“跟随”或“新建”，它会更改该链接的背景，并保持不变，直到我单击其他链接。这意味着你想这样做，看看该链接是否已被单击/访问？我更新了答案和测试代码的链接。请检查它。什么不起作用？我看到代码片段正在按照您的要求执行什么不起作用？我看到代码片段正在按照您的要求执行
//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"));  
});