切换图标-总结方法

1. 整体思路

点击某个li 元素，替换其中img标签中的src属性，且要让其他的所有兄弟li元素变为默认的图片。由于每个li元素的默认图片和要替换的图片都不一样。难度就在此。

2. 需要注意的几个地方

1. 每个li要使用的图片统一命名， 如：
   默认图片为： demo_d.png。点击切换图片为：demo_c.png
2. 可以使用纯js来书写，因为如果使用jquery来遍历每个li元素的兄弟节点稍微有点麻烦。下面的代码使用纯为jquery，没有使用原生js，使用每个li元素的class来遍历兄弟节点，具体看代码注释。
3. 如果各位看官有更好一点的方法，欢迎指正和分享。

3. 示例代码

<div class="personConLeft">
	<ul>
		<li class="0"><img src="../../static/img/personCenter/submit_d.png"/> <a >我的发布</a></li>
		<li class="1"><img src="../../static/img/personCenter/copro_d.png"/><a>我的合作</a></li>
		<li class="2"><img src="../../static/img/personCenter/promote_d.png"/><a>我的推广</a></li>
		<li class="3"><img src="../../static/img/personCenter/confirm_d.png"/><a>认证中心</a></li>
		<li class="4"><img src="../../static/img/personCenter/money_d.png"/><a>钱包</a></li>
		<li class="5"><img src="../../static/img/personCenter/set_d.png"/><a>设置</a></li>
	</ul>
</div>

var index = 10;
var flag = false;
var oldIndex = 10;
$('.personConLeft ul li').click(function(){
//			自己修改样式
	$(this).css({'background':'#488eff','left':"-90px"});
//			解除绑定的hover事件
	$(this).unbind('mouseenter').unbind('mouseleave');
	
	index = $(this).attr('class');
//			修改字体颜色/图片src
	$(this).children('a').css({'color':'#fff'});
	var img_d = $(this).children('img').attr('src');
	var img_c = img_d.replace(/_d/,'_c') 
    $(this).children('img').attr('src',img_c);
    
//		    兄弟节点修改样式
//			修改字体颜色/背景颜色
	$(this).siblings().css({'background':'#fff'});
	$(this).siblings().children('a').css({'color':'#488eff'});

//		    将上一个保存的li,恢复鼠标移入移出动作
    if(flag = true){
    	$(this).siblings('.'+oldIndex).animate({left:"0"})
    	$(this).siblings('.'+oldIndex).mouseenter(function(){
			$(this).animate({left:"-90px"})
		})
    	$(this).siblings('.'+oldIndex).mouseleave(function(){
			$(this).animate({left:"0"})
		});
    }
    flag = true;
    oldIndex = index;
    //拿到兄弟节点的个数
    var len = $(this).siblings().length;
//		   	 根据class，循环修改每个兄弟节点中的图片src
    for(var i=0;i<=len;i++){
    	var img_d = $(this).siblings('.'+i).children('img').attr('src');
    	if(img_d){
    		var img_c = img_d.replace(/_c/,'_d') 
    		$(this).siblings('.'+i).children('img').attr('src',img_c);
    	}
    }
})