如何更改活动链接的颜色？答案

【问题标题】：How to change the color of an active link?如何更改活动链接的颜色？
【发布时间】：2018-01-31 18:57:57
【问题描述】：

我想将所选链接的颜色更改为红色。

例如我点击了链接文字dog，颜色将变为红色，因为它当前已被选中。如果我单击链接文本 cat，颜色将变为红色，链接文本 dog 将返回默认链接颜色。

HTML

<ul>
   <li> <a href="#"> dog </a> </li> 
   <li> <a href="#"> cat </a> </li>

</ul>

CSS

??

【问题讨论】：

标签： html css html-lists

【解决方案1】：

你可以使用:focus伪类。

当元素获得焦点时应用 :focus CSS 伪类，无论是通过用户使用键盘选择它还是通过鼠标激活（例如表单输入）。

a:focus {
  color: red;
}

<ul>
  <li> <a href="#"> dog </a> </li>
  <li> <a href="#"> cat </a> </li>
</ul>

但是如果你想让链接在你点击页面上的其他地方时保持红色，那么你可以使用 js

$('li').click(function() {
  $(this).siblings().find('a').removeClass('focus');
  $(this).find('a').addClass('focus');
});

.focus {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> <a href="#"> dog </a> </li>
  <li> <a href="#"> cat </a> </li>
</ul>

【讨论】：

是的，我想点击 LI 元素来激活 HTML 链接。
很高兴能帮上忙。

【解决方案2】：

a:focus {
  color: red;
}

<ul>
  <li> <a href="#"> dog </a> </li>
  <li> <a href="#"> cat </a> </li>
</ul>

【讨论】：

虽然我们感谢您的回答，但如果它在其他答案之上提供额外的价值会更好。在这种情况下，您的答案不会提供额外的价值，因为另一个用户已经发布了该解决方案。如果之前的答案对您有帮助，您应该投票而不是重复相同的信息。

【解决方案3】：

您可以使用 :visited 选择器来设置所有访问过的文档链接的样式。检查http://www.w3schools.com/cssref/sel_visited.asp

【讨论】：