jquery tab点击切换的问题

问题：

 

页面结构见下

<div id="wrap">
    <li>
        <a href="#" class="active">昵称修改</a>
    </li>
    <li>
       <a href="#">志愿者修改</a>
    </li>
    <li>
       <a href="#">头像修改</a>
    </li>
    <li>
       <a href="#">手机修改</a>
    </li>
    <li>
       <a href="#">密码修改</a>
    </li>
</div>    

首先密码修改默认有一个A样式，剩下的样式是一样的。

实现的功能是，当我点击其他几个按钮时，比如我点击志愿者修改时，那么志愿者修改对应的的样式变成了A，昵称修改的样式和其他未点击的保持一致。

当时想的给每一个a标签绑定一个事件，但这样代码重复的太多了。

后来因为点击每个a标签都会经历一个初始化的过程，在初始化的过添加一个方法。实现点击样式的切换。

//具体实现
$("#wrap li a").on('click', function(){
  for(var i=0; i<$("#wrap li a").length; i++){
    $("#wrap li a").removeClass("active");
  }
  $("#wrap li a").addClass("active");
})

这样就可以很好地实现样式的切换。