html或者jsp的问题！a标签的点击事件实现！

 请问如何才能实现

比如：

<a>一个a标签</a>

<a>另一个a标签</a>

我在点击一个a标签的时候，添加一个【class属性】，
在点击另一个a标签的时候，删除这个【class属性】，并且给另一个a标签添加这个【class属性】？？

 <a href="javascript:;" class="aa" onclick="">A</a>
  <a href="javascript:;" class="bb" id="B">B</a>

    function aaa(){
        document.getElementById("B").className ="aa";
    }

 <div id="dv">
    <a>一个a标签</a>

    <a>另一个a标签</a>
</div>
<style>.focus{color:#fff;background:#f00}</style>
<script>
    //代码注意放在dom对象下面，并且你需要进行此操作的a放到对应的id容器下，如果你要操作所有的a，用document做根节点执行getElementsByTagName方法
    var as = document.getElementById('dv').getElementsByTagName('a')
    for (var i = 0; i < as.length; i++) {
        as[i].onclick = function () {
            for (var i = 0; i < as.length; i++) as[i].className = '';
            this.className='focus'
        }
    }
</script>