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>

Answer 1

显然 :focus 仅在您点击页面中的其他内容之前保持“上次点击”颜色。

a:focus { color: green; }

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

Answer 2

我为所有链接提供了一个名为“myLink”的类和一个 onclick 函数“linkClicked()”。这是 JavaScript 的样子：

SomeFunction

Answer 3

有相应的 css 选择器。

a:link and     a:visited.

第一个在链接处于正常状态时起作用，第二个在您单击特定链接时起作用，因此您可以像这样>

a:link {
  color: red;
}

a:visited {
  color: green;
}

您也可以使用 a:active 当您点击链接时立即触发，但一旦点击事件结束，颜色就会恢复正常（换句话说，效果持续 0.01 秒）

我怎样才能让最后点击的锚元素 <a> 有不同的颜色？

3 个答案: