javascript - 如何仅使最后单击的锚元素具有不同的颜色？

Question

我有一个侧边栏，我希望我的锚元素（我的 HTML 中的链接 1、2、3）中的文本在单击时改变颜色。另外，我希望一次只有一个彩色锚元素，因此应该始终将前一个元素恢复为正常颜色。如何才能做到这一点？

这是我的 HTML： https ://pastebin.com/ew9qXAzH

这些是我的锚元素：

<div class="sidenav">
  <button class="dropdown-btn">Dropdown1 
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <button class="dropdown-btn">Dropdown2 
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

标签： javascripthtmlcss

Answer 1

显然:focus，只有在您单击页面中的其他内容之前，才会保留“最后一次点击”的颜色。

a:focus { color: green; }

<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>