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

Question

I want to change to color red of selected link.

For example I clicked the link text dog, the color will change to red because it's currently selected. If I clicked the link text cat the color will change to red and link text dog will go back to default link color.

HTML

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

</ul>

CSS

??

Answer 1

You can use :focus pseudo-class.

The :focus CSS pseudo-class is applied when an element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (eg a form input).

 a:focus { color: red; }

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

But if you want link to stay red when you click somewhere else on page then you can use 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>

Answer 2

 a:focus { color: red; }

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

Answer 3

You can use the :visited selector to style all the visited document links. Check http://www.w3schools.com/cssref/sel_visited.asp