问题:
页面结构见下
<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");
})
这样就可以很好地实现样式的切换。