CSS 链接样式,该怎么处理 _HTML/CSS

CSS 链接样式
大家好，小弟第一次做这种链接，在网上找过，但都不是我想要的效果。

想要的效果是这样的，<a></a> 样式，

<a>1</a>
<a>2</a>
<a>3</a>

当我点击链接 1 的时候背景停留在1 上面当我点击2的时候背景图片停留在2上面而1 又变成原来的样子..

我知道用 a:link、a:visited、a:hover和a:active
可是当我点击2的时候 1 并没有变回原来的样子，不知道为什么....请高手指点指点。

------解决方案--------------------
那个应该做不到，因为你点击过的a都是a:visited，没法区分现在点击过还是以前点击过

HTML code

<style>
.v{
  background:red;
}
</style>

<div id="t">
<a>1</a>
  <a>2</a>
  <a>3</a>
</div>

<script>

removeclassName = function(o){
  for (var i=0; i<o.length;i++){
    o[i].className = "";
  }
}

var ba = document.getElementById("t").getElementsByTagName("a");
for (var i=0; i<ba.length;i++){
  ba[i].onclick = function(){
    removeclassName(ba);
    this.className = "v";
  }
}
</script>

------解决方案--------------------
别在a:visited里写，写在a:hover里就行了。就是把点击变成鼠标跟踪。

后面的问题，跟刷新没关系，跟缓存有关系。缓存清空的话，点击链接的记录就消失了，所以再点击就有效果，但过后有了记录的话，就没效果了。除非你的浏览器设置是在刷新的时候进行的是彻底刷新（即之前的操作痕迹都清空）。