a:active solo funciona en la misma página, es decir, si tu enlace te manda a otra página, el active ya no funciona. Por ejemplo:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
a:link, a:visited
{
text-decoration:none;
color:black;
}
a:hover
{
text-decoration:none;
color:red;
}
a:active
{
text-decoration:none;
color:green;
background-color:yellow;
}
</style>
</head>
<body>
<a href="#" title="link 1">LINK 1</a><br />
<a href="#" title="link 2">LINK 2</a><br />
<a href="#" title="link 3">LINK 3</a><br />
<a href="#" title="link 4">LINK 4</a><br />
</body>
</html> Aqui puedes ver como active te mantiene la opción en donde te encuentras.
Para enlaces que te lleven a otra página, puedes crear una clase que convierta el link en el que te encuentras en el link a:active, por decirlo asi...
Por ejemplo:
pagina1.html
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
a:link, a:visited
{
text-decoration:none;
color:black;
}
a:hover
{
text-decoration:none;
color:red;
}
a:active
{
text-decoration:none;
color:green;
background-color:yellow;
}
.vis
{
text-decoration:none;
color:green;
background-color:yellow;
}
</style>
</head>
<body>
<a href="pagina1.html" title="link 1"><p class="vis">LINK 1</p></a>
<a href="pagina2.html" title="link 2"><p>LINK 2</p></a>
<a href="pagina3.html" title="link 3"><p>LINK 3</p></a>
<a href="pagina4.html" title="link 4"><p>LINK 4</p></a>
</body>
</html> pagina2.html
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
a:link, a:visited
{
text-decoration:none;
color:black;
}
a:hover
{
text-decoration:none;
color:red;
}
a:active
{
text-decoration:none;
color:green;
background-color:yellow;
}
.vis
{
text-decoration:none;
color:green;
background-color:yellow;
}
</style>
</head>
<body>
<a href="pagina1.html" title="link 1"><p>LINK 1</p></a>
<a href="pagina2.html" title="link 2"><p class="vis">LINK 2</p></a>
<a href="pagina3.html" title="link 3"><p>LINK 3</p></a>
<a href="pagina4.html" title="link 4"><p>LINK 4</p></a>
</body>
</html> pagina3.html
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
a:link, a:visited
{
text-decoration:none;
color:black;
}
a:hover
{
text-decoration:none;
color:red;
}
a:active
{
text-decoration:none;
color:green;
background-color:yellow;
}
.vis
{
text-decoration:none;
color:green;
background-color:yellow;
}
</style>
</head>
<body>
<a href="pagina1.html" title="link 1"><p>LINK 1</p></a>
<a href="pagina2.html" title="link 2"><p>LINK 2</p></a>
<a href="pagina3.html" title="link 3"><p class="vis">LINK 3</p></a>
<a href="pagina4.html" title="link 4"><p>LINK 4</p></a>
</body>
</html> pagina4.html
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
a:link, a:visited
{
text-decoration:none;
color:black;
}
a:hover
{
text-decoration:none;
color:red;
}
a:active
{
text-decoration:none;
color:green;
background-color:yellow;
}
.vis
{
text-decoration:none;
color:green;
background-color:yellow;
}
</style>
</head>
<body>
<a href="pagina1.html" title="link 1"><p>LINK 1</p></a>
<a href="pagina2.html" title="link 2"><p>LINK 2</p></a>
<a href="pagina3.html" title="link 3"><p>LINK 3</p></a>
<a href="pagina4.html" title="link 4"><p class="vis">LINK 4</p></a>
</body>
</html> Como puedes ver la clase "vis" tiene el mismo contenido que a:active.
Esta clase esta colocada en cada uno de los enlaces de la página en la que te encuentras.
Espero haber ayudado.