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

Question

我想要改变所选链接的颜色为红色。

例如，如果我点击了链接文字“dog”，颜色会变成红色，因为它当前被选中。如果我点击了链接文字“cat”，颜色会改变为红色，而链接文字“dog”会恢复默认的链接颜色。

HTML

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

</ul>

CSS

??

- Van Adrian Cabrera

Answer 1

您可以使用 :focus 伪类。

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

a:focus {
  color: red;
}

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

但是，如果您希望链接在页面上的其他位置被点击后仍保持红色，则可以使用JavaScript。

$('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>

- Nenad Vracar

---

是的，我想点击 LI 元素以激活 HTML 链接。 - Van Adrian Cabrera

我很高兴能够帮助到你。 - Nenad Vracar

Answer 2

a:focus {
  color: red;
}

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

- goutam reddy

---

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

Answer 3

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

- Sam